Custom Summary Tags

You can customize your summary tags to include adding colored icons

A common request when building integrations is to customize the summary tags for an integration. The following recipe will walk through setting color coded indicators in the summary tags of an integration. In this example, the color coding will be tied to the severity level of the indicator.

To support customizing the summary tags, we will need to modify the integration's config to add in summary block configuration properties. Add the following properties to your config.js file located at /app/polarity-server/integrations/<your-integration-directory>/config/config.js

config/config.js

{
  summary: {
    component: {
      file: "./components/summary.js"
    },
    template: {
      file: "./templates/summary.hbs"
    }
  }
}

The configuration file references two new files we will need to add. The first file is a custom handlebars template file for our summary block (the area in the integration where we display the "summary tags"). Create a new summary.hbs file inside the templates directory and add the following code.

templates/summary.hbs

{{#each block.data.summary as |tag|}}
    <span {{on "click" (optional this.scrollToIntegration)}} class="integration-summary-tag integration-background-color integration-border-color">
       <span class="acronym integration-text-bold-color">{{block.acronym}}</span>
       <span class="integration-text-color">
           {{fa-icon icon="circle"
                     class=(concat iconClass "")
                     fixedWidth=true}}
           {{tag}}
       </span>
    </span>
{{/each}}

The above code loops through the tags specified in the summary array and then creates the HTML layout required to render a tag. Notice that we're adding a custom circle icon via the {{fa-icon}} helper. When we create this icon we're setting a dynamic class which we will set in our summary.js component file. In addition, notice the {{on "click"}} helper which is added to the outer span tag. This helper is used to implement the "jump to integration" behavior and should be included in your custom summary tag template.

Copy the following component file to your summary.js file.

components/summary.js

polarity.export = PolarityComponent.extend({
  iconClass: Ember.computed('block.data.details.severity', function() {
    let severity = this.get('block.data.details.severity');
    let color = 'red';
    if (severity === 'low') {
      color = 'green';
    }

    return Ember.String.htmlSafe(color);
  })
});

The component above assumes you have a severity property in your returned integration data. We're creating a computed property called iconClass which will return a CSS class name used to color our icon. The color is being set based on the value of the severity property, green for low severity and red for high severity. The iconClass property is applied to the icon we created in our handlebars template file summary.hbs.

Finally, we will need to define the styles in our custom Less stylesheet. If you haven't already you will need to add a styles configuration property to your config.js file.

config/config.js

{
  styles: ["./styles/styles.less"]
}

Once added to your config, create the styles.less file and add the classes for your custom colors.

styles/style.less

.green {
  color: #7BC942 !important;
}

.red {
  color: #FF4559 !important;
}

Notice that the name of the class matches the value we return from our summary component for the iconClass computed property.

Once everything is setup, you should see colored circle icons that represent the severity of an indicator right in the summary block of your integration.