diff --git a/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Convert SVG image to Adaptive Cards Image URL.json b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Convert SVG image to Adaptive Cards Image URL.json new file mode 100644 index 0000000..e34a17c --- /dev/null +++ b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Convert SVG image to Adaptive Cards Image URL.json @@ -0,0 +1,141 @@ +{ + "runbook": { + "id": "c73ec47b-de1e-49d0-bb3e-accf8daf5975", + "createdTime": "1762951289.899183200", + "lastUpdatedTime": "1762951289.899183200", + "factoryResourceName": null, + "isFactory": false, + "name": "Convert SVG image to Adaptive Cards Image URL", + "description": "Skill that converts an image in SVG format into a URL for Image Element in Adaptive Cards", + "isReady": false, + "triggerType": "subflow_input", + "runtimeVariables": null, + "subflowVariables": { + "primitiveVariables": [ + { + "type": "string", + "defaultValue": null, + "name": "subflow.SVG", + "isReadonly": false + }, + { + "type": "string", + "defaultValue": null, + "name": "subflow.Image_URL", + "isReadonly": false + } + ], + "structuredVariables": [] + }, + "nodes": [ + { + "id": "3d0a7a9a-2701-4a90-a367-14f6bdd2d5a8", + "isIntegrationSubflowNode": false, + "type": "subflow_input", + "label": "Subflow Input", + "description": "", + "properties": { + "x": 321, + "y": 160, + "triggerType": "subflow_input", + "outputDataFormat": "summary", + "debug": false, + "synthKeys": [], + "inputVariables": [ + "subflow.SVG" + ], + "outputVariables": [ + "subflow.Image_URL" + ], + "integrationIds": {}, + "tagIds": {}, + "staticInputValuesLists": { + "subflow.SVG": [] + }, + "inputOrOutputValuesDescriptions": [] + }, + "wires": [ + [ + "dd889921-9fcd-4687-873a-9ea78d4149ef" + ] + ] + }, + { + "id": "6f245260-40e6-4ede-bd8a-7f3b522b85da", + "isIntegrationSubflowNode": false, + "type": "comment", + "label": "Comment", + "description": "", + "properties": { + "x": 50, + "y": 105, + "comment": "

Input

SVG: an image in SVG format


Output

Image_URL: encoded image to be used in the URL properties of an Image element in Adaptive Cards

", + "debug": false + }, + "wires": [] + }, + { + "id": "6ad565c8-a2c4-4f59-a994-0fb5b1152709", + "isIntegrationSubflowNode": false, + "type": "comment", + "label": "Comment 1", + "description": "", + "properties": { + "x": 333, + "y": 300, + "comment": "

SVG sample for testing:


<svg width=\"100\" height=\"100\">

  <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"/>

</svg>

", + "debug": false + }, + "wires": [] + }, + { + "id": "dd889921-9fcd-4687-873a-9ea78d4149ef", + "isIntegrationSubflowNode": false, + "type": "set_primitive_variables", + "label": "Convert", + "description": "", + "properties": { + "x": 529, + "y": 160, + "variables": [ + { + "name": "subflow.Image_URL" + } + ], + "transformTemplate": "{% comment %}\nConvert the SVG to an URL that can be used in an Image element of an Adaptive Cards\n{% endcomment %}\n{\n \"subflow.Image_URL\": \"data:image/svg+xml;base64,{{variables[\"subflow.SVG\"] | base64_encode}}\"\n}", + "debug": false + }, + "wires": [ + [ + "1e38bc14-5b67-49c4-a686-d655c15082d5" + ] + ] + }, + { + "id": "1e38bc14-5b67-49c4-a686-d655c15082d5", + "isIntegrationSubflowNode": false, + "type": "subflow_output", + "label": "Subflow Output", + "description": "", + "properties": { + "x": 755, + "y": 160, + "index": 0 + }, + "wires": [] + } + ], + "lastUpdatedUser": "Runbook Export", + "createdByUser": "Runbook Export", + "eTag": "W/\"datetime'2025-11-12T12%3A58%3A16.6969134Z'\"", + "variant": "subflow", + "seriesId": "c73ec47b-de1e-49d0-bb3e-accf8daf5975", + "version": "1.0", + "otherVersions": null, + "isScheduled": false, + "isValidated": true, + "isProprietary": false + }, + "dependencies": [], + "token": "QsPUndMSa2kGcvC4kmxxwZ+ffFkU6pWdIy0frTXzmwE=" +} \ No newline at end of file diff --git a/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Demo - Export NPM+ Time Series Chart to different Format.json b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Demo - Export NPM+ Time Series Chart to different Format.json new file mode 100644 index 0000000..46995f0 --- /dev/null +++ b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/Demo - Export NPM+ Time Series Chart to different Format.json @@ -0,0 +1,301 @@ +{ + "runbook": { + "id": "e32e918e-1d46-4464-a471-18daaf7876ca", + "createdTime": "1762951529.633969400", + "lastUpdatedTime": "1762954169.462139200", + "factoryResourceName": null, + "isFactory": false, + "name": "Demo - Export NPM+ Time Series Chart to different Format", + "description": "Demonstrate how to use the skills to generate a chart image and then convert the image to be used in an Adaptive Cards (for Teams)\nversion: 2025-11-12", + "isReady": false, + "triggerType": "on_demand_input", + "runtimeVariables": { + "primitiveVariables": [ + { + "type": "string", + "defaultValue": null, + "name": "runtime.SVG_Content", + "isReadonly": false + }, + { + "type": "string", + "defaultValue": null, + "name": "runtime.Image_URL", + "isReadonly": false + }, + { + "type": "string", + "defaultValue": null, + "name": "runtime.Adaptive_Cards_Content", + "isReadonly": false + } + ], + "structuredVariables": [] + }, + "subflowVariables": null, + "nodes": [ + { + "id": "6d70c445-b15d-408a-83bd-6166a4aa5f0a", + "isIntegrationSubflowNode": false, + "type": "on_demand_input", + "label": "Input", + "description": "", + "properties": { + "x": 232, + "y": 169.99999999999997, + "triggerType": "on_demand_input", + "debug": false, + "outputDataFormat": "summary", + "synthKeys": [ + { + "id": "user_device", + "label": "User Device", + "type": "object", + "unit": "", + "dataOceanId": "user_device", + "dataOceanKeys": [ + { + "id": "user_device.device_name", + "label": "User Device Name", + "type": "string", + "category": "Device", + "unit": "none" + } + ] + } + ], + "inputVariables": [], + "outputVariables": [] + }, + "wires": [ + [ + "c64b84e8-60ac-4c4d-a76c-89da57e0f050" + ] + ] + }, + { + "id": "c64b84e8-60ac-4c4d-a76c-89da57e0f050", + "isIntegrationSubflowNode": false, + "type": "data_ocean_dynamic", + "label": "Data Store", + "description": "", + "properties": { + "x": 459, + "y": 169.99999999999997, + "objType": "npm_plus.traffic", + "timeSeries": true, + "metrics": [ + "sum_bytes" + ], + "limit": 10, + "topBy": [ + { + "id": "throughput", + "direction": "desc" + } + ], + "groupBy": [ + "user_device.device_name" + ], + "duration": 3600, + "filters": { + "userDevice": [ + "$onDemandInput.user_device" + ] + }, + "debug": false + }, + "wires": [ + [ + "5a3aa400-c953-40af-a60d-8c9b840fb07e" + ] + ] + }, + { + "id": "5a3aa400-c953-40af-a60d-8c9b840fb07e", + "isIntegrationSubflowNode": false, + "type": "subflow", + "label": "Skill: Generate Chart Image", + "description": "Generate chart image in SVG format from time series data.", + "properties": { + "x": 696, + "y": 169.99999999999997, + "debug": false, + "configurationId": "e7f4c219-7a3e-45fd-be5b-ff4c27945222", + "in": [ + { + "inner": "subflow.Title", + "outer": "Traffic", + "method": "static", + "isUnset": false + }, + { + "inner": "subflow.Chart_Type", + "outer": "line", + "method": "static", + "isUnset": false + }, + { + "inner": "subflow.Width", + "outer": "" + }, + { + "inner": "subflow.Height", + "outer": "" + }, + { + "inner": "subflow.Metrics", + "outer": "sum_bytes", + "method": "static", + "isUnset": false + } + ], + "out": [ + { + "inner": "subflow.SVG_Content", + "outer": "runtime.SVG_Content", + "method": "runtime" + } + ] + }, + "wires": [ + [ + "a9f8c951-e9cb-4f2d-a1f6-3b8bc76144f9" + ] + ] + }, + { + "id": "a9f8c951-e9cb-4f2d-a1f6-3b8bc76144f9", + "isIntegrationSubflowNode": false, + "type": "subflow", + "label": "Convert SVG image to Adaptive Cards Image URL", + "description": "Skill that converts an image in SVG format into a URL for Image Element in Adaptive Cards", + "properties": { + "x": 1006, + "y": 169.99999999999997, + "debug": false, + "configurationId": "c73ec47b-de1e-49d0-bb3e-accf8daf5975", + "in": [ + { + "inner": "subflow.SVG", + "outer": "runtime.SVG_Content", + "method": "runtime", + "isUnset": false + } + ], + "out": [ + { + "inner": "subflow.Image_URL", + "outer": "runtime.Image_URL", + "method": "runtime" + } + ] + }, + "wires": [ + [ + "c44e0129-946f-46a6-a610-0915a5a7219a" + ] + ] + }, + { + "id": "c44e0129-946f-46a6-a610-0915a5a7219a", + "isIntegrationSubflowNode": false, + "type": "set_primitive_variables", + "label": "Compose Adaptive Cards", + "description": "", + "properties": { + "x": 1349, + "y": 189.99999999999997, + "variables": [ + { + "name": "runtime.Adaptive_Cards_Content" + } + ], + "transformTemplate": "{% assign content = \"\" %}\n\n{% capture content %}\n{\n \"type\": \"AdaptiveCard\",\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"version\": \"1.6\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"text\": \"Metrics\",\n \"weight\": \"bolder\",\n \"size\": \"medium\"\n },\n {\n \"type\": \"Image\",\n \"url\": \"{{variables[\"runtime.Image_URL\"]}}\",\n \"altText\": \"Chart\",\n \"size\": \"Auto\"\n }\n ]\n}\n{% endcapture %}\n\n{\n \"runtime.Adaptive_Cards_Content\": {{ content | json }}\n}", + "debug": false + }, + "wires": [ + [ + "b109eb06-a762-4f4a-8bf4-dcb619de3d55" + ] + ] + }, + { + "id": "b109eb06-a762-4f4a-8bf4-dcb619de3d55", + "isIntegrationSubflowNode": false, + "type": "rvbd_ui_text", + "label": "Display Content (Text)", + "description": "", + "properties": { + "x": 1653, + "y": 310, + "title": "Adaptive Cards Content (Text)", + "row": "20", + "notes": "

{{variables[\"runtime.Adaptive_Cards_Content\"]}}

", + "debug": false + }, + "wires": [] + }, + { + "id": "77428f27-9a68-4de6-b007-a6d252377c90", + "isIntegrationSubflowNode": false, + "type": "comment", + "label": "Comment", + "description": "", + "properties": { + "x": 1295, + "y": 50, + "comment": "

Use **Image_URL** inside a template composing an Adaptive Cards ( **Adaptive_Cards_Content variable** )

", + "debug": false + }, + "wires": [] + }, + { + "id": "3d8c4cee-924a-4c5a-9d57-1f74ab9ef262", + "isIntegrationSubflowNode": false, + "type": "comment", + "label": "Comment 1", + "description": "", + "properties": { + "x": 963, + "y": 50.00000000000001, + "comment": "

Convert from **SVG_Content** variable into **Image_URL** variable

", + "debug": false + }, + "wires": [] + } + ], + "lastUpdatedUser": "Runbook Export", + "createdByUser": "Runbook Export", + "eTag": "W/\"datetime'2025-11-12T13%3A29%3A29.4763094Z'\"", + "variant": "on_demand", + "seriesId": "e32e918e-1d46-4464-a471-18daaf7876ca", + "version": "1.0", + "otherVersions": null, + "isScheduled": false, + "isValidated": false, + "isProprietary": false + }, + "dependencies": [ + { + "id": "e7f4c219-7a3e-45fd-be5b-ff4c27945222", + "type": "subflow", + "name": "Skill: Generate Chart Image", + "globalId": "RiverbedIQAssist::Generate_Chart_Image", + "originalVersion": "1.0.4", + "nodeLabel": "Skill: Generate Chart Image", + "sourceLocation": "integrationLibrary", + "sourcePackageId": "RiverbedIQAssist" + }, + { + "id": "c73ec47b-de1e-49d0-bb3e-accf8daf5975", + "type": "subflow", + "name": "Convert SVG image to Adaptive Cards Image URL", + "globalId": "c73ec47b-de1e-49d0-bb3e-accf8daf5975", + "originalVersion": "1.0", + "nodeLabel": "Convert SVG image to Adaptive Cards Image URL", + "sourceLocation": "custom" + } + ], + "token": "xET9UJzDCOvSg0QkIMoHpho0KDSjw08pCEiLvJy/TAw=" +} \ No newline at end of file diff --git a/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/README.md b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/README.md new file mode 100644 index 0000000..57140c5 --- /dev/null +++ b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/README.md @@ -0,0 +1,30 @@ +# Convert SVG image to Adaptive Cards Image URL + +Skill that converts an image in SVG format into a URL for Image Element in Adaptive Cards + +## Setup + +1. Download the [subflow file](Convert%20SVG%20image%20to%20Adaptive%20Cards%20Image%20URL.json). + +2. Go to *Automation*, *Subflows*, and hit **Import**. + +## How to use + +This [On-Demand runbook](Demo%20-%20Export%20NPM+%20Time%20Series%20Chart%20to%20different%20Format.json) demonstrates how to use the skill "Convert SVG image to Adaptive Cards Image URL", generating a chart image, converting the image, and composing an Adaptive Cards (for Teams). + +1. Download the [On-Demand runbook](Demo%20-%20Export%20NPM+%20Time%20Series%20Chart%20to%20different%20Format.json) + +2. Go to *Automation*, *On-Demand Runbooks*, and hit **Import**. + +3. Run the runbook + +4. The output will display the content of the composed Adaptive Cards + +![alt text](demo.png) + + +### License + +Copyright (c) 2025 Riverbed Technology, Inc. + +The contents provided here are licensed under the terms and conditions of the MIT License accompanying the software ("License"). The scripts are distributed "AS IS" as set forth in the License. The script also include certain third party code. All such third party code is also distributed "AS IS" and is licensed by the respective copyright holders under the applicable terms and conditions (including, without limitation, warranty and liability disclaimers) identified in the license notices accompanying the software. diff --git a/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/demo.png b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/demo.png new file mode 100644 index 0000000..4993bb9 Binary files /dev/null and b/IQ/Automation/Subflows/Convert SVG image to Adaptive Cards Image URL/demo.png differ