Internal documentation only

This page has been marked as draft.

Icons (SVG Sprite)

Simple shortcode to include icons from SVG sprites outside of menus.

{{< icon "settings" >}}

Example Copied

Result Usage
{{< icon "content_copy" >}}
{{< icon "control_point_duplicate" >}}
{{< icon "error_outline" >}}
{{< icon "keyboard_arrow_down" >}}
{{< icon "more_vert" >}}
{{< icon "settings" >}}
{{< icon "warning" >}}

About the symbols Copied

The different glyphs are added grouped on .svg files within the folder /assets/sprites/ of the theme folder.

At this moment, there is only a material.svg, where we’re adding just those icons that we need, from the Material UI icons library. https://fonts.google.com/icons?selected=Material+Icons, getting the SVG source code and adding it to the sprite file.

Use cases Copied

Some real use cases extracted from obcerv content:

Creating a dashboard Copied

To create a new dashboard:

  1. On the main page of the Dashboards app, click New. This opens the New dashboard window.
  2. Click to change the general settings rather than:
  3. Click Settings button to change the general settings.
  4. On the Dashboard name field, set the file name for the dashboard.
  5. On the Folder field, select which folder the dashboard will be saved in.
  6. To make the dashboard accessible to anyone in your organization, tick the Is public? checkbox.
  7. To enable future changes to the dashboard, tick the Editable by default checkbox.
  8. Add panels to the dashboard. For details, see “Adding panels or widgets to a dashboard”.
  9. Click Save.

Using query filters Copied

You can filter data to quickly find what you are interested in.

  1. Under Data type, select whether to use Metrics or Logs.
  2. Depending on the data type, you can:
Data type Description
Metrics
  • Select the metric to be visualised under Metric Name. By default, metrics of all available entities are listed.
  • In the From field, select entities and set conditions for your query. You’ll see a prompt to start the expression with {, followed by a list of available entities.
  • Choose in Group by which metric to use in organizing the data.
  • Choose in Group function which aggregations will be applied to the data.
  • Under Interval size, select the time interval to pace the data.
  • Enable the Forecast on/off switch to allow forecast.
Logs In the From field, select entities and set conditions for your query. You’ll see a prompt to start the expression with {, followed by a list of available entities.
  1. When needed, add another query by clicking . You can have both metrics and logs shown in the visualisation, instead of:
  2. When needed, add another query by clicking Add query icon . You can have both metrics and logs shown in the visualisation.

Managing dashboards Copied

On the main page of the Dashboards app, click beside each dashboard to see options such as exporting, copying, moving, or deleting it. On the main page of the Dashboards app, click Edit button beside each dashboard to see options such as exporting, copying, moving, or deleting it.

Use within shortcodes / partials Copied

In those files, you can take advantage of the use of the SVG Sprites by using directly HTML markup, rather than the icon shortcode.

E.g.: <svg class="icon warning"><use xlink:href="#warning"></use></svg> for getting warning icon.

Alternative to SVG sprites, using images Copied

In some cases, we may need/prefer to continue uploading images to add visual icons. In those cases, please make use of the class icon, to apply the styles accordingly for inline image icons:

E.g.: ![Add query icon](/obcerv-meta/images/web_console-add_query-1-0.jpg "icon") will add an Add query icon image inline.

You can make it a little bit bigger by adding the class icon-l:

E.g.: Add query icon icon image inline.

E.g.: Settings button icon image inline.

["ITRS Analytics"] ["User Guide"]

Was this topic helpful?