Liquid Markup with RightScale Widgets

Using a DeploymentDrop

The following Liquid syntax will create a Deployment Overview Widget:

<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>

Using a ServerDrop

The following Liquid syntax will create a Servers Overview Widget:

<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>

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>

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>

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 %}

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>