Using a Variable in Canvas Render CSS

[BenB196]

Hi All,

I have a need to use a variable in Canvas' render CSS, but I can't find a way to do this.

I'm effectively trying to do some math on an animation to be able to handle variable length text.

Canvas simplified example:

var_set name="open_alerts"
  value={essql query="SELECT kibana.alert.rule.name AS rule_name, kibana.alert.reason AS alert_reason FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE GROUP BY kibana.alert.rule.name, kibana.alert.reason"}
| var_set name="open_alerts_count"
  value={essql query="SELECT COUNT(*) as count FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE"}
| var name="open_alerts"
| markdown "Open Alerts: {{#each rows}}{{rule_name}} -- {{alert_reason}}; {{/each}}"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#005ac2" weight="bold" underline=false italic=false}
| render 
  css=".canvasRenderEl {
    white-space: nowrap;
      overflow: hidden;
  }

  .canvasRenderEl p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee calc(10s * 100) linear infinite;
  }

  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }" 
  containerStyle={containerStyle border="1px  #e6e8db" backgroundColor="#e6e8db" padding="1px" borderRadius="3px"}

On the animation line I have currently:

animation: marquee calc(10s * 100) linear infinite;

In the calc() function, instead of using a static value of 100, I'd like to use the variable: open_alerts_count, this way the scroll speed is dynamically set to the number of open alerts, rather than a fixed speed.

[BenB196]

Figured this out and answering my own question in case someone else comes across this problem. You can use string to concatenate the variable into the rest of the CSS.

var_set name="open_alerts"
  value={essql query="SELECT kibana.alert.rule.name AS rule_name, kibana.alert.reason AS alert_reason FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE GROUP BY kibana.alert.rule.name, kibana.alert.reason"}
| var_set name="open_alerts_count"
  value={essql query="SELECT COUNT(*) as count FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE"}
| var name="open_alerts"
| markdown "Open Alerts: {{#each rows}}{{rule_name}} -- {{alert_reason}}; {{/each}}"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#005ac2" weight="bold" underline=false italic=false}
| render 
  css={string ".canvasRenderEl {
    white-space: nowrap;
      overflow: hidden;
  }

  .canvasRenderEl p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee calc(10s * " {var "open_alerts_count" | getCell "count"} ") linear infinite;
  }

  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }"}
  containerStyle={containerStyle border="1px  #e6e8db" backgroundColor="#e6e8db" padding="1px" borderRadius="3px"}