feat: Display alert count on deployments table

Author: tiithansen

src/pages/Workloads/tabs/Deployments/DeploymentExpandedRow.tsx

@@ -1,7 +1,8 @@
-import { SceneFlexLayout } from "@grafana/scenes";
+import { SceneFlexItem, SceneFlexLayout } from "@grafana/scenes";
 import { getPodsScene } from "../Pods/Pods";
 import { LabelFilters } from "common/queryHelpers";
 import { TableRow } from "./types";
+import { AlertsTable } from "components/AlertsTable";
 
 export function buildExpandedRowScene(row: TableRow) {
 
@@ -21,10 +22,30 @@ export function buildExpandedRowScene(row: TableRow) {
 
     return new SceneFlexLayout({
       key: `${row.namespace}/${row.deployment}`,
+      direction: 'column',
       width: '100%',
-      height: 500,
       children: [
-        getPodsScene(staticLabelFilters, false, false)
+        new SceneFlexLayout({
+          direction: 'row',
+          height: 300,
+          children: [
+            getPodsScene(staticLabelFilters, false, false)
+          ]
+        }),
+        new SceneFlexLayout({
+          direction: 'row',
+          children: [
+            new SceneFlexItem({
+              body: AlertsTable([
+                {
+                  label: 'deployment',
+                  op: '=',
+                  value: row.deployment
+                }
+              ], false, false)
+            })
+          ]
+        }),
       ],        
     });
   }

src/pages/Workloads/tabs/Deployments/Deployments.tsx

@@ -7,7 +7,7 @@ import {
     SceneVariableSet,
 } from '@grafana/scenes';
 import { ReplicasCell } from 'pages/Workloads/components/ReplicasCell';
-import { getSeriesValue } from 'common/seriesHelpers';
+import { getAllSeries, getSeriesValue } from 'common/seriesHelpers';
 import { buildExpandedRowScene } from './DeploymentExpandedRow';
 import { createNamespaceVariable } from 'common/variableHelpers';
 import { TableRow } from './types';
@@ -52,6 +52,19 @@ const columns: Array<Column<TableRow>> = [
             local: true,
         }
     },
+    {
+        id: 'alerts',
+        header: 'ALERTS',
+        sortingConfig: {
+            enabled: true,
+            local: false,
+            type: 'value'
+        },
+        accessor: (row: TableRow) => row.alerts ? row.alerts.length : 0,
+        cellProps: {
+            // color: determineAlertsColor
+        }
+    },
     { 
         id: 'replicas',
         header: 'REPLICAS',
@@ -78,6 +91,8 @@ function asyncRowMapper(row: TableRow, asyncRowData: any) {
         total,
         ready
     }
+
+    row.alerts = getAllSeries(asyncRowData, 'alerts', serieMatcherPredicate(row))
 }
 
 function createRowId(row: TableRow) {

src/pages/Workloads/tabs/Deployments/Queries.ts

@@ -5,14 +5,31 @@ import { TableRow } from "./types";
 import { QueryBuilder, ColumnSortingConfig } from "components/AsyncTable";
 import { SortingState } from "common/sortingHelpers";
 
+function createAlertsQuery(cluster?: string, deployments?: string) {
+    return `
+        ALERTS{
+            cluster="${cluster}",
+            ${deployments ? `deployment=~"${deployments}",` : ''}
+            alertstate="firing",
+        }
+        * ignoring(alertstate) group_right(alertstate) ALERTS_FOR_STATE{
+            cluster="${cluster}",
+            ${deployments ? `deployment=~"${deployments}",` : ''}
+        }
+    `
+}
+
 function createRowQueries(rows: TableRow[], sceneVariables: SceneVariables) {
 
     const deployments = rows.map(row => row.deployment).join('|');
     const cluster = resolveVariable(sceneVariables, 'cluster');
 
     return [
         {
-
+            refId: 'alerts',
+            expr: createAlertsQuery(cluster?.toString(), deployments),
+            instant: true,
+            format: 'table'
         },
         {
             refId: 'replicas',

src/pages/Workloads/tabs/Deployments/types.ts

@@ -1,3 +1,10 @@
+
+export interface DeploymentAlert {
+    deployment: string;
+    alertname: string;
+    severity: string;
+}
+
 export interface TableRow {
     cluster: string;
     deployment: string;
@@ -8,4 +15,5 @@ export interface TableRow {
         ready: number;
         total: number;
     }
+    alerts: DeploymentAlert[];
 }