Use CI Viz for opmon dashboards (#430)

generator/dashboards/operational_monitoring_dashboard.py

@@ -43,15 +43,21 @@ class OperationalMonitoringDashboard(Dashboard):
         return klass(title, name, "newspaper", namespace, defn["tables"])
 
     def _map_series_to_colours(self, branches, explore):
-        colours = ["#ff6a06", "#ffb380", "#ffb380", "blue", "#8cd3ff", "#8cd3ff"]
-        series_labels = []
-        for branch in branches:
-            series_labels += [
-                f"{branch} - {explore}.percentile",
-                f"{branch} - {explore}.high",
-                f"{branch} - {explore}.low",
-            ]
-        return dict((label, colour) for (label, colour) in zip(series_labels, colours))
+        colours = [
+            "#3FE1B0",
+            "#0060E0",
+            "#9059FF",
+            "#B933E1",
+            "#FF2A8A",
+            "#FF505F",
+            "#FF7139",
+            "#FFA537",
+            "#005E5D",
+            "#073072",
+            "#7F165B",
+            "#A7341F",
+        ]
+        return {branch: color for branch, color in zip(branches, colours)}
 
     def to_lookml(self, bq_client):
         """Get this dashboard as LookML."""

generator/dashboards/templates/dashboard.lkml

@@ -8,7 +8,7 @@
   - title: {{element.title}}
     name: {{element.title}}
     explore: {{element.explore}}
-    type: "looker_line"
+    type: "ci-line-chart"
     fields: [
       {{element.explore}}.{{element.xaxis}},
       {{element.explore}}.branch,
@@ -26,16 +26,20 @@
     col: {{element.col}}
     width: 12
     height: 8
+    field_x: {{element.explore}}.submission_date
+    field_y: {{element.explore}}.percentile
+    log_scale: true
+    ci_lower: {{element.explore}}.low
+    ci_upper: {{element.explore}}.high
+    show_grid: true
     listen:
       Percentile: {{element.explore}}.percentile_conf
       {%- for dimension in dimensions %}
       {{dimension.title}}: {{element.explore}}.{{dimension.name}}
       {%- endfor %}
-    y_axes: [{type: log}]
-    series_colors:
-      {% for label, colour in element.series_colors.items() -%}
-      {{label}}: "{{colour}}"
-      {% endfor %}
+    {%- for branch, color in element.series_colors.items() %}
+    {{ branch }}: "{{ color }}"
+    {%- endfor %}
   {% endfor -%}
   filters:
   - name: Percentile

tests/test_operational_monitoring.py

@@ -383,7 +383,7 @@ def test_dashboard_lookml(operational_monitoring_dashboard):
         - title: Gc Ms
           name: Gc Ms
           explore: fission_histogram
-          type: "looker_line"
+          type: "ci-line-chart"
           fields: [
             fission_histogram.build_id,
             fission_histogram.branch,
@@ -400,23 +400,22 @@ def test_dashboard_lookml(operational_monitoring_dashboard):
           col: 0
           width: 12
           height: 8
+          field_x: fission_histogram.submission_date
+          field_y: fission_histogram.percentile
+          log_scale: true
+          ci_lower: fission_histogram.low
+          ci_upper: fission_histogram.high
+          show_grid: true
           listen:
             Percentile: fission_histogram.percentile_conf
             Cores Count: fission_histogram.cores_count
             Os: fission_histogram.os
-          y_axes: [{type: log}]
-          series_colors:
-            enabled - fission_histogram.percentile: "#ff6a06"
-            enabled - fission_histogram.high: "#ffb380"
-            enabled - fission_histogram.low: "#ffb380"
-            disabled - fission_histogram.percentile: "blue"
-            disabled - fission_histogram.high: "#8cd3ff"
-            disabled - fission_histogram.low: "#8cd3ff"
-
+          enabled: "#3FE1B0"
+          disabled: "#0060E0"
         - title: Gc Ms Content
           name: Gc Ms Content
           explore: fission_histogram
-          type: "looker_line"
+          type: "ci-line-chart"
           fields: [
             fission_histogram.build_id,
             fission_histogram.branch,
@@ -433,19 +432,18 @@ def test_dashboard_lookml(operational_monitoring_dashboard):
           col: 12
           width: 12
           height: 8
+          field_x: fission_histogram.submission_date
+          field_y: fission_histogram.percentile
+          log_scale: true
+          ci_lower: fission_histogram.low
+          ci_upper: fission_histogram.high
+          show_grid: true
           listen:
             Percentile: fission_histogram.percentile_conf
             Cores Count: fission_histogram.cores_count
             Os: fission_histogram.os
-          y_axes: [{type: log}]
-          series_colors:
-            enabled - fission_histogram.percentile: "#ff6a06"
-            enabled - fission_histogram.high: "#ffb380"
-            enabled - fission_histogram.low: "#ffb380"
-            disabled - fission_histogram.percentile: "blue"
-            disabled - fission_histogram.high: "#8cd3ff"
-            disabled - fission_histogram.low: "#8cd3ff"
-
+          enabled: "#3FE1B0"
+          disabled: "#0060E0"
         filters:
         - name: Percentile
           title: Percentile