From ba9e4ff578091ba3f56e251c013f473b2b99bf35 Mon Sep 17 00:00:00 2001
From: Tiit Hansen <hansen.tiit@gmail.com>
Date: Sat, 6 Jul 2024 16:10:39 +0300
Subject: [PATCH] fix: Some visual improvements

---
 .../Workloads/components/ResourceLabels.tsx     |  9 +++------
 src/pages/Workloads/pages/DeploymentPage.tsx    | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/pages/Workloads/components/ResourceLabels.tsx b/src/pages/Workloads/components/ResourceLabels.tsx
index 8431781..1d75314 100644
--- a/src/pages/Workloads/components/ResourceLabels.tsx
+++ b/src/pages/Workloads/components/ResourceLabels.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { SceneComponentProps, SceneObjectBase, SceneObjectState, SceneQueryRunner, sceneGraph } from "@grafana/scenes";
 import { LabelFilters, serializeLabelFilters } from '../../../common/queryHelpers';
 import { DataFrameView, GrafanaTheme2, LoadingState } from '@grafana/data';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
 
 interface Label {
@@ -25,14 +25,13 @@ const getStyles = (theme: GrafanaTheme2) => {
         borderRadius: theme.shape.radius.default,
         width: '100%',
         backgroundColor: theme.colors.background.secondary,
-  
         td: {
           padding: theme.spacing(1),
         },
-  
         'td, th': {
           minWidth: theme.spacing(3),
         },
+        marginTop: '16px',
       }),
       disableGrow: css({
         width: 0,
@@ -66,11 +65,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       row: css({
         label: 'row',
         borderBottom: `1px solid ${theme.colors.border.weak}`,
-  
         '&:hover': {
           backgroundColor: rowHoverBg,
         },
-  
         '&:last-child': {
           borderBottom: 0,
         },
@@ -117,7 +114,7 @@ class ResourceLabels extends SceneObjectBase<ResourceLabelsState> {
         }, [data]);
 
         return (
-            <div className={styles.container}>
+            <div className={cx(styles.container)}>
                 <table className={styles.table}>
                     <thead>
                         <tr>
diff --git a/src/pages/Workloads/pages/DeploymentPage.tsx b/src/pages/Workloads/pages/DeploymentPage.tsx
index 1d7a2cb..fcbd633 100644
--- a/src/pages/Workloads/pages/DeploymentPage.tsx
+++ b/src/pages/Workloads/pages/DeploymentPage.tsx
@@ -10,6 +10,7 @@ import { Metrics } from "metrics/metrics";
 import Heading from "components/Heading";
 import { CPUUsagePanel } from "../components/CPUUsagePanel";
 import { MemoryUsagePanel } from "../components/MemoryUsagePanel";
+import { AlertsTable } from "components/AlertsTable";
 
 function getPods(deployment: string, namespace: string) {
     const staticLabelFilters: LabelFilters = [
@@ -121,8 +122,22 @@ function getScene(deployment: string, namespace = '$namespace') {
                             }]),
                         }),
                         new SceneFlexItem({
-                            height: 200,
                             width: `${(2/3) * 100}%`,
+                            body: AlertsTable([
+                                {
+                                    label: 'deployment',
+                                    op: '=',
+                                    value: deployment,
+                                }
+                            ], false, false)
+                        }),
+                    ]
+                }),
+                new SceneFlexLayout({
+                    direction: 'row',
+                    children: [
+                        new SceneFlexItem({
+                            height: 200,
                             body: getReplicasPanel(deployment, namespace),
                         })
                     ]