Note: Please go to docs.rightscale.com to access the current RightScale documentation set. Also, feel free to Chat with us!
Home > Reference Info > Liquid Markup with RightScale Widgets

Liquid Markup with RightScale Widgets

 

Table of Contents

Overview

Liquid is a Ruby library for rendering safe templates that does not affect the security of the server where they are rendered. It is a markup language that allows users to create custom UI's. Liquid uses filters as helper methods. A Liquid Drop is the class of objects that is provided to the Liquid template. 

RightScale use of Liquid

Here is sample Liquid syntax for a ServerDrop - "servers" is the set of data returned from a ServerDrop. This Liquid syntax is making use of exposed attributes through the "state", "link", and "cpu_icon" helper methods and also uses the "important" filter to add <blink></blink> HTML tags around the "link" item:

<table>
  {% if servers == empty %}
    <tr align="center">- No matching servers -</tr>
  {% else %}
    <tr>
      <th>Name</th><th>State</th>
    </tr>
    {% for s in servers %} 
      <tr>
        {% if s.state == "stranded in booting" %}
          <td style="background-color:yellow;">{{ s.link | important }}</td>
        {% else %}
          <td>{{ s.link }}</td>
        {% endif %}

        <td>{{ s.cpu_icon }}</td>
      </tr>
    {% endfor %}
  {% endif %}
</table>

 


 

DeploymentDrop

A DeploymentDrop is the resource exposed to the Liquid template, that wraps a Deployment object. Users will only have access to attributes/data exposed through helpers. 

Helper methods to access exposed attributes Description
nickname deployment nickname 
link link to the deployment object 
description deployment description 
state_icons icons indicating operational, stopped, stranded servers, and their counts 

e.g. screen-LiquidExample1.png
operational_server_count  number of operational servers in the deployment 
stopped_server_count number of stopped servers in the deployment
stranded_server_count number of stranded servers in the deployment
tags

array of tags on the deployment

 

Examples:

Display all tags on deployments

{% for d in deployments %}
  {% for t in d.tags %}
    {{ t }}<br/>
  {% endfor %}
{% endfor %}

 

Display the name of a deployment that contains a tag

 {% for d in deployments %}
  {% if d.tags contains "name:pred=value" %}
    {{ d.nickname }}<br/>
  {% endif %}
{% endfor %}

 


ServerDrop

A ServerDrop, which wraps a Server object, is the resource exposed to Liquid template. Users only have access to attributes/data exposed through helpers. 

Helper methods to access exposed attributes Description
nickname server nickname 
link link to server object 
deployment_nickname deployment nickname 
deployment_link link to deployment object 
server_template_nickname server template nickname 
server_template_link  link to server template object 
cloud_name cloud name 
runtime runtime 
state server state (e.g. operational, stranded in booting, ...) 
zone zone or datacenter 
cpu_icon applicable cpu icon representation of the state 

e.g. screen-LiquidExample4.png  screen-LiquidExample3.png  screen-LiquidExample2.png
tags

array of tags on the server

 

Examples:

Display all tags on servers

{% for s in servers %}
  {% for t in s.tags %}
    {{ t | important }}<br/>
  {% endfor %}
{% endfor %}

 

Display the name of a server that contains a tag

 {% for s in servers %}
  {% if s.tags contains "name:pred=value" %}
    {{ s.nickname }}<br/>
  {% endif %}
{% endfor %}

 


AlertDrop

An AlertDrop, which wraps an Alert object, is the resource exposed to Liquid template. Users only have access to attributes/data exposed through helpers. 

Helper methods to access exposed attributes Description
name alert name 
escalation escalation name
deployment_link link to the deployment to which the alert is associated
server_link link to the instance encountering the alert
condition_detail details of the condition triggering the alert
alerted_at date and time at which the alert triggered
state_icon

applicable icon representation of the state

e.g. screen-UsingLiquidwithWidgets1.png  screen-UsingLiquidwithWidgets2.png

 


Filters exposed 

 

important - enclose item in <blink></blink> HTML tags
Syntax:
    {{[variable or "string" ] | important}}
Example:
    {{"something" | important}}
Yields:
    <blink>something</blink> 

 


Tags

 

counter - initialize a counter variable

Syntax:
    {% counter [variable] = [starting_value] %}
Example:
    {% counter my_counter = 0 %}

 

increment - increment counter by 1

Syntax:
    {% increment [variable] %}
Example:
    {% increment my_counter %}



pie_chart - produce a pie chart

Syntax:

    {% pie_chart [title], [label1], [data1], ... %}

Example:

    {% pie_chart "My Pie Chart", "January", 3, "February", 5, "March", 8, "April", 4 %}

Yields: screen-PieChartExample.png
 


bar_chart - produce a bar chart

Syntax:

    {% bar_chart [title], [label1], [data1], ... %}

Example:

    {% bar_chart "My Bar Chart", "Jan", 75, "Feb", 38, "Mar", 58, "Apr", 30, "May", 5 %}

Yields: screen-BarChart.png


Examples

Some of the examples below make use of the config.current_view configuration variable.

config.current_view will contain either "overview" when the widget is displayed in its normal state in the Dashboard Overview tab:

screen-UsingLiquidwithWidgets4.png

or "expanded" when the expand icon is clicked, and the widget is displayed in expanded mode:

screen-UsingLiquidwithWidgets10.png

You can utilize config.current_view in your Liquid syntax.

 


Using a DeploymentDrop

The following Liquid syntax will create the Widget below:

<table>
  <tr>
    <th>Name</th>
    {% if config.current_view == "expanded" %}
      <th>Description</th>
    {% endif %}
    <th>State</th>
    {% if config.current_view == "expanded" %}
      <th>Tags</th>
    {% endif %}
  </tr>
  {% if deployments == empty %}
    <tr><td style="text-align:center;padding:20px" colspan=100>-none-</td></tr>
  {% else %}
    {% for d in deployments %}
      <tr>
        <td>{{ d.link }}</td>
        {% if config.current_view == "expanded" %}
          <td>{{ d.description }}</td>
        {% endif %}
        <td>{{ d.state_icons }}</td>
        {% if config.current_view == "expanded" %}
          <td>{{ d.tags }}</td>
        {% endif %}
      </tr>
    {% endfor %}
  {% endif %}
</table>

 screen-UsingLiquidwithWidgets3.png


Using a ServerDrop

The following Liquid syntax will create the Widget below:

<table>
  <tr>
    <th>Nickname</th>
    {% if config.current_view == "expanded" %}
       <th>Deployment</th>
       <th>ServerTemplate</th>
       <th>Cloud</th>
    {% endif %}
    <th>CPU</th>
    <th>State</th>
    {% if config.current_view == "expanded" %}
       <th>Runtime</th>
       <th>Zone</th>
    {% endif %}
  </tr>

  {% if servers == empty %}
    <tr><td style="text-align:center;padding:20px" colspan="100">-none-</td></tr>
  {% else %}
    {% for s in servers %}
      <tr>
        {% if s.state == "stranded in booting" %}
          <td style="background-color:yellow;">{{ s.link | important }}</td>
        {% else %}
          <td>{{ s.link }}</td>
        {% endif %}
        {% if config.current_view == "expanded" %}
          <td>{{ s.deployment_link }}</td>
          <td>{{ s.server_template_link }}</td>
          <td>{{ s.cloud_name }}</td>
        {% endif %}
        <td style="text-align:center">{{ s.cpu_icon }}</td>
        <td>{{ s.state }}</td>
        {% if config.current_view == "expanded" %}
          <td>{{ s.runtime }}</td>
          <td>{{ s.zone }}</td>
        {% endif %}
      </tr>
    {% endfor %}
  {% endif %}
</table>

screen-UsingLiquidwithWidgets4.png


 

Using a ServerDrop to produce a pie chart

The following Liquid syntax will create the Widget below:

{% counter us_east_1a_count = 0 %}
{% counter us_east_1b_count = 0 %}
{% counter us_east_1c_count = 0 %}
{% counter us_east_1d_count = 0 %}
{% counter us_west_1a_count = 0 %}
{% counter us_west_1b_count = 0 %}
{% counter eu_west_1a_count = 0 %}
{% counter eu_west_1b_count = 0 %}
{% counter other_count = 0 %}

{% for s in servers %}

    {% case s.zone %}
    {% when 'us-east-1a' %}
      {% increment us_east_1a_count %}
    {% when 'us-east-1b' %}
      {% increment us_east_1b_count %}
    {% when 'us-east-1c' %}
      {% increment us_east_1c_count %}
    {% when 'us-east-1d' %}
      {% increment us_east_1d_count %}
    {% when 'us-west-1a' %}
      {% increment us_west_1a_count %}
    {% when 'us-west-1b' %}
      {% increment us_west_1b_count %}
    {% when 'eu-west-1a' %}
      {% increment eu_west_1a_count %}
    {% when 'eu-west-1b' %}
      {% increment eu_west_1b_count %}
    {% else %}
      {% increment other_count %}
    {% endcase %}

{% endfor %}
<div style="text-align:center">
  <img src="{% pie_chart "RightScale Developers EBS - Deployment Zones", "us_east_1a", us_east_1a_count, "us_east_1b", us_east_1b_count, "us_east_1c", us_east_1c_count, "us_east_1d", us_east_1d_count,  "us_west_1a", us_west_1a_count, "us_west_1b", us_west_1b_count, "eu_west_1a", eu_west_1a_count, "eu_west_1b", eu_west_1b_count, "other", other_count %}" />
</div>

 

screen-UsingLiquidwithWidgets5.png

Note: This example yields statistics based on the servers in a single deployment. To isolate results to the servers in a single deployment, a filter specifying a single deployment must be provided. For an example this specific, where iterating over multiple deployments is not desired and could yield undesired results, it is best to predefine a filter in the widget definition. See Filter Configuration for more information.

 


Using a DeploymentDrop to produce a bar chart

The following Liquid syntax will create the Widget below:

<table>
{% if deployments == empty %}
  <tr><td style="text-align:center;padding:20px">-no matching deployments-</td></tr>
{% else %}
  {% for d in deployments %}
    {% if d.operational_server_count > 0 or d.stopped_server_count > 0 or d.stranded_server_count > 0 %}
      <th style="text-align:center">{{ d.link }} Statistics</th>
      <tr>
        <td style="text-align:center;padding-bottom:60px">
          <img src="{% bar_chart "", "Operational", d.operational_server_count, "Stopped", d.stopped_server_count, "Stranded", d.stranded_server_count %}" />
        </td>
      </tr>
    {% endif %}
  {% endfor %}
{% endif %}
</table>

 

screen-UsingLiquidwithWidgets6.png

 


 

Server State pie chart

The following Liquid syntax will create the Widget below:

{% if servers == empty %}
  <div style="text-align:center;padding:20px">-no matching servers-</div>
{% else %}
  {% counter operational_count = 0 %}
  {% counter booting_count = 0 %}
  {% counter stranded_count = 0 %}
  {% assign my_table_contents = "" %}
  {% for s in servers %}
      {% if s.state == "operational" %}
        {% increment operational_count %}
      {% endif %}
      {% if s.state == "booting" %}
        {% increment booting_count %}
      {% endif %}
      {% if s.state == "stranded in booting" %}
        {% capture my_table_contents %}
          {{ my_table_contents }}
          <tr><td>{{ s.link }}</td></tr>
        {% endcapture %}
        {% increment stranded_count %}
      {% endif %}
  {% endfor %}
  <div style="text-align:center">
    <img src="{% pie_chart "Active Server Statistics", "Operational", operational_count, "Booting", booting_count, "Stranded", stranded_count %}"/>
  </div>
  {% if stranded_count > 0 %}
    <table>
      <th>Stranded Servers</th>
      {{ my_table_contents }}
    </table>
  {% endif %}
{% endif %}

 

 screen-UsingLiquidwithWidgets7.png

 


Active Alerts

The following Liquid syntax will create the Widget below:

<table>
  <th>Name</th>
  <th>Deployment</th>
  <th>Server</th>
  <th>Escalation</th>
  {% if config.current_view == "expanded" %}
    <th>Condition</th>
  {% endif %}
  <th>State</th>
  <th>Alerted at</th>
  {% if alerts == empty %}
    <tr><td style="text-align:center;padding:20px" colspan="100">-none-</td></tr>
  {% else %}
    {% for a in alerts %}
      <tr>
        <td>{{ a.name }}</td>
        <td>{{ a.deployment_link }}</td>
        <td>{{ a.server_link }}</td>
        <td>{{ a.escalation }}</td>
        {% if config.current_view == "expanded" %}
          <td>{{ a.condition_detail }}</td>
        {% endif %}
        <td>{{ a.state_icon }}</td>
        <td>{{ a.alerted_at }}</td>
      </tr>
    {% endfor %}
  {% endif %}
</table>

 

 screen-UsingLiquidwithWidgets8.png

See also

You must to post a comment.
Last modified
23:30, 16 May 2013

Tags

Classifications

This page has no classifications.

Announcements

None


© 2006-2014 RightScale, Inc. All rights reserved.
RightScale is a registered trademark of RightScale, Inc. All other products and services may be trademarks or servicemarks of their respective owners.