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.