202 journey view redesign (#224)

* feat: sliTypes are grouped under one sli for journey view * Show all SLI types combined under each SLI row * Fix title of panel row * Fix titles and refactor the code. * Fix comments in code. * Nothing to see here Co-authored-by: Samiwel Thomas <[email protected]> Co-authored-by: samiwelthomasHO <[email protected]>
HO-CTO · Sep 16, 2022 · f065fa7 · f065fa7
1 parent 5e0b909
commit f065fa7
Showing 1 changed file with 42 additions and 19 deletions.
diff --git a/monitoring-as-code/src/dashboards/journey-dashboard.libsonnet b/monitoring-as-code/src/dashboards/journey-dashboard.libsonnet
@@ -7,6 +7,47 @@ local dashboard = grafana.dashboard;
 local row = grafana.row;
 local template = grafana.template;
 
+// Create the Grafana panels grouping all SLI types under a single SLI panel
+// @param slis A map of SLIs keyed by the SLI type
+// @returns array of panel elements
+local createPanelInfo (slis) =
+
+    local row = 0;
+    local findSli(elem, slis) = slis[std.objectFields(slis)[elem]];
+    [
+      // Status panel indicating SLO performance over last reporting period (30d by default)
+      [findSli(elem, slis).slo_availability_panel { gridPos: { x: 0, y: elem * row, w: 4, h: 6 } }]
+      +
+      // Graph panel showing remaining error budget for reportinhg period (30d by default) over
+      // selectable number of days
+      [findSli(elem, slis).error_budget_panel { gridPos: { x: 4, y: elem * row, w: 10, h: 6 } }]
+      +
+      // Transparent text panel added to make spacing for slo status panel correct
+      [grafana.text.new(title = null, transparent = true) + { gridPos: { x: 14, y: elem * row, w: 0.5, h: 1 } }]
+      +
+      // Status of SLO (pass/fail) for same time period as detail graph below
+      [findSli(elem, slis).slo_status_panel { gridPos: { x: 14.5, y: elem * row, w: 9, h: 1 } }]
+      +
+      // Detail graph for this SLI, generated by metric specific library
+      [findSli(elem, slis).graph { gridPos: { x: 14, y: elem * row, w: 10, h: 5 } }]
+      for elem in std.range(0, std.length(std.objectFields(slis)) - 1 )
+
+    ];
+
+
+// Adds the granfa title panel for a created dashbaord
+// @param sliKey of a journey
+// @param slis The list of SLIs for a journey
+// @returns array defining the dashboard of one sli
+local createDashboardInfo(sliKey, slis) =
+    local sliRowTile = '%(sliKey)s: %(title)s' % {
+        sliKey: sliKey,
+        title: slis[std.objectFields(slis)[0]].title
+    };
+    [
+      [grafana.row.new(title = sliRowTile)] + std.flattenArrays(createPanelInfo(slis))
+    ];
+
 // Creates the journey view dashboards for each journey in the service
 // @param config The config for the service defined in the mixin file
 // @param sliList The list of SLIs for a service
@@ -39,26 +80,8 @@ local createJourneyDashboards(config, sliList, links) =
         config.templates
       ).addPanels(
         std.flattenArrays([
-          // Title for row of panels detailing a single SLO
-          [grafana.row.new(title = sli.row_title)]
-          +
-          // Status panel indicating SLO performance over last reporting period (30d by default)
-          [sli.slo_availability_panel { gridPos: { x: 0, y: 0, w: 4, h: 6 } }]
-          +
-          // Graph panel showing remaining error budget for reportinhg period (30d by default) over
-          // selectable number of days
-          [sli.error_budget_panel { gridPos: { x: 4, y: 0, w: 10, h: 6 } }]
-          +
-          // Transparent text panel added to make spacing for slo status panel correct
-          [grafana.text.new(title = null, transparent = true) + { gridPos: { x: 14, y: 0, w: 0.5, h: 1 } }]
-          +
-          // Status of SLO (pass/fail) for same time period as detail graph below
-          [sli.slo_status_panel { gridPos: { x: 14.5, y: 0, w: 9, h: 1 } }]
-          +
-          // Detail graph for this SLI, generated by metric specific library
-          [sli.graph { gridPos: { x: 14, y: 0, w: 10, h: 5 } }]
+          std.flattenArrays(createDashboardInfo(sliKey, sliList[journeyKey][sliKey]))
           for sliKey in std.objectFields(sliList[journeyKey])
-          for sli in std.objectValues(sliList[journeyKey][sliKey])
         ])
       )
     for journeyKey in std.objectFields(sliList)