fix: Some visual improvements

tiithansen · Jul 6, 2024 · ba9e4ff · ba9e4ff
1 parent 407d624
commit ba9e4ff
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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),
                         })
                     ]