Use of File Render

Prerequisites

Modules

• osp-web

git checkout origin/osp-web-configuration .

Vscode extension

• osp-composer

Example configuration

TODO VALIDATE

git checkout origin/example-template-playbook-file-render-git

Description

This example demonstrates how to use File Render target. . Generally this is used to gather information about one or multiples Inventory and create dashboard or scripts.

Note

The utilization of this language represents an advanced feature, providing significant power but also requiring a important knowledge. Exercise caution when working with it, as it may be complex for some users to comprehend fully.

This example explain the creation of a widget for every single device in inventory in a dashboard.

Example

1. Create an Inventory

source;destination;rule;variable-deviceNames
templates.sources.state;root.fribourg.state;;light01
templates.sources.state;root.lausanne.state;;light02

This inventory represent a list of devices. Each of them has a name to display in a common dashboard.

2. Define a playbook

This playbook define a target of type File Render:

[
    {
        "type": "FileRender",
        "generation": [
            {
                "source": "templates/sources/example-1/dashboard/dashboard.view.nunjucks",
                "destination": "root.dashboard"
            }
        ],
        "import": {
            "devicesList": "templates/inventory/data.csv"
        }
    },
    {
        "type": "FileRender",
        "generation": [
            {
                "source": "templates/sources/example-1/dashboard/dashboard.web.nunjucks",
                "destination": "root.dashboard"
            }
        ],
        "import": {}
    },
    {
        "type": "ItemsRender",
        "source": "templates/inventory/data.csv",
        "fileRenderContext": {}
    }
]

Field generation contain a link between template source and rendering destination.

A very important properties is import. Every properties of this field will be exposed in File Rendering context. In this example, all entries in inventory templates/inventory/data.csv will be exposed as an array behind the variable deviceList.

3. Create dashboard

{
    "configuration": [
      {% for device in devicesList %}
      {
        "type": "BasicInputOutputValue",
        "id": "{{ device.deviceNames }}",
        "title": "{{ device.deviceNames }}",
        "valueSubscriptions": {
            "values": [
                {
                    "id": "{{ device.destination }}.enable",
                    "type": "BOOLEAN",
                    "right": "READ_WRITE"
                }
            ]
        },
        "basicWidgetSettings": {
            "label": "Toggle Device",
            "showLabel": true,
            "showTooltip": true,
            "showIcon": true,
            "showValue": false,
            "onValue": false,
            "offValue": true,
            "onIcon": "logout",
            "offIcon": "warning_amber",
            "onBackgroundColor": "#cc0000",
            "offBackgroundColor": "#757575"
        }
    }
    {% if not loop.last %},{% endif %}{% endfor %}
    ],
    "layout": {
        "lg": []
    }
}

A {% for %} loop iter over deviceList and create for every device a single widget with name.

Finally an {% if %} condition test if the loop iteration is the last one to not add a comma (to prevent invalid json).

4. Execute the playbook

Generate the playbook template with one of the given command :

• Playbook template [execute-all]

• Playbook template [execute a unique target] and select the example.playbook then press enter.

5. Push the configuration

Warning

Always use the command [execute-all] before pushing to be sure that there is no file auto-generated who are not used anymore (example a csv line is deleted).

git add .
git commit -m "Add two example dashboard"
git push

6. Visualize the result

Final generated tree look like following:

root
└── dashboard
    └── dashboard.view
templates
├── inventory
│   └── datas.csv
├── playbooks
│   └── exemple.playbook
└── sources
    └── exemple-1
        └── dashboard
            └── dashboard.view.nunjucks

And final dashboard will finally contains a widget for every devices from inventory:

{
"configuration": [
    {
    "type": "BasicInputOutputValue",
    "id": "d",
    "title": "light01",
    "valueSubscriptions": {
        "values": [
        {
            "id": "root.fribourg.state.enable",
            "type": "BOOLEAN",
            "right": "READ_WRITE"
        }
        ]
    },
    "basicWidgetSettings": {
        "label": "Toggle Device",
        "showLabel": true,
        "showTooltip": true,
        "showIcon": true,
        "showValue": false,
        "onValue": false,
        "offValue": true,
        "onIcon": "logout",
        "offIcon": "warning_amber",
        "onBackgroundColor": "#cc0000",
        "offBackgroundColor": "#757575"
    }
    },
    {
    "type": "BasicInputOutputValue",
    "id": "d",
    "title": "light02",
    "valueSubscriptions": {
        "values": [
        {
            "id": "root.lausanne.state.enable",
            "type": "BOOLEAN",
            "right": "READ_WRITE"
        }
        ]
    },
    "basicWidgetSettings": {
        "label": "Toggle Device",
        "showLabel": true,
        "showTooltip": true,
        "showIcon": true,
        "showValue": false,
        "onValue": false,
        "offValue": true,
        "onIcon": "logout",
        "offIcon": "warning_amber",
        "onBackgroundColor": "#cc0000",
        "offBackgroundColor": "#757575"
    }
    }
],
"layout": {
    "lg": []
},
"isTemplateGeneratedByOspComposer": true
}