feat: GA service health dashboard + metrics alerting + k8s dashboard …

…/ metrics side panel (#379)
hyperdxio · Apr 19, 2024 · 4d6fb8f · 4d6fb8f
1 parent 3a85c0a
commit 4d6fb8f
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 70 deletions.
diff --git a/.changeset/gold-stingrays-collect.md b/.changeset/gold-stingrays-collect.md
@@ -0,0 +1,6 @@
+---
+'@hyperdx/app': minor
+'@hyperdx/api': minor
+---
+
+feat: GA service health dashboard + metrics alert
diff --git a/.changeset/sweet-singers-cough.md b/.changeset/sweet-singers-cough.md
@@ -0,0 +1,6 @@
+---
+'@hyperdx/app': minor
+'@hyperdx/api': minor
+---
+
+feat: GA k8s dashboard / metrics side panel
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
@@ -26,12 +26,7 @@ import { version } from '../package.json';
 
 import api from './api';
 import AuthLoadingBlocker from './AuthLoadingBlocker';
-import {
-  IS_LOCAL_MODE,
-  K8S_DASHBOARD_ENABLED,
-  SERVER_URL,
-  SERVICE_DASHBOARD_ENABLED,
-} from './config';
+import { IS_LOCAL_MODE, SERVER_URL } from './config';
 import Icon from './Icon';
 import Logo from './Logo';
 import { KubernetesFlatIcon } from './SVGIcons';
@@ -1126,48 +1121,44 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               </Link>
             </div>
 
-            {SERVICE_DASHBOARD_ENABLED ? (
-              <div className="px-3 my-3">
-                <Link
-                  href="/services"
-                  className={cx(
-                    'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
-                    {
-                      'fw-bold text-success': pathname.includes('/services'),
-                    },
-                  )}
-                >
-                  <span>
-                    <i className="bi bi-heart-pulse pe-1 text-slate-300" />{' '}
-                    {!isCollapsed && <span>Service Health</span>}
-                  </span>
-                </Link>
-              </div>
-            ) : null}
+            <div className="px-3 my-3">
+              <Link
+                href="/services"
+                className={cx(
+                  'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
+                  {
+                    'fw-bold text-success': pathname.includes('/services'),
+                  },
+                )}
+              >
+                <span>
+                  <i className="bi bi-heart-pulse pe-1 text-slate-300" />{' '}
+                  {!isCollapsed && <span>Service Health</span>}
+                </span>
+              </Link>
+            </div>
 
-            {K8S_DASHBOARD_ENABLED ? (
-              <div className="px-3 my-3">
-                <Link
-                  href="/kubernetes"
-                  className={cx(
-                    'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
-                    {
-                      'fw-bold text-success': pathname.includes('/kubernetes'),
-                    },
-                  )}
-                >
-                  <span>
-                    <span
-                      className="pe-1 text-slate-300"
-                      style={{ top: -2, position: 'relative' }}
-                    >
-                      <KubernetesFlatIcon width={16} />
-                    </span>{' '}
-                    {!isCollapsed && <span>Kubernetes</span>}
-                  </span>
-                </Link>
-              </div>
-            ) : null}
+            <div className="px-3 my-3">
+              <Link
+                href="/kubernetes"
+                className={cx(
+                  'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
+                  {
+                    'fw-bold text-success': pathname.includes('/kubernetes'),
+                  },
+                )}
+              >
+                <span>
+                  <span
+                    className="pe-1 text-slate-300"
+                    style={{ top: -2, position: 'relative' }}
+                  >
+                    <KubernetesFlatIcon width={16} />
+                  </span>{' '}
+                  {!isCollapsed && <span>Kubernetes</span>}
+                </span>
+              </Link>
+            </div>
 
             <div>
               <div

diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
@@ -27,7 +27,6 @@ import {
 } from './ChartUtils';
 import Checkbox from './Checkbox';
 import * as config from './config';
-import { METRIC_ALERTS_ENABLED } from './config';
 import EditChartFormAlerts from './EditChartFormAlerts';
 import GranularityPicker from './GranularityPicker';
 import HDXHistogramChart from './HDXHistogramChart';
@@ -1274,7 +1273,8 @@ export const EditLineChartForm = ({
 
   const isChartAlertsFeatureEnabled =
     alerts != null &&
-    (_editedChart.series[0].table === 'logs' || METRIC_ALERTS_ENABLED);
+    ((_editedChart.series[0].table ?? 'logs') === 'logs' ||
+      _editedChart.series[0].table === 'metrics');
 
   return (
     <form

diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx
@@ -42,7 +42,6 @@ import {
   K8S_FILESYSTEM_NUMBER_FORMAT,
   K8S_MEM_NUMBER_FORMAT,
 } from './ChartUtils';
-import { K8S_METRICS_ENABLED } from './config';
 import { CurlGenerator } from './curlGenerator';
 import LogLevel from './LogLevel';
 import {
@@ -2734,7 +2733,7 @@ export default function LogSidePanel({
                         },
                       ] as const)
                     : []),
-                  ...(K8S_METRICS_ENABLED && hasK8sContext
+                  ...(hasK8sContext
                     ? ([
                         {
                           text: 'Infrastructure',

diff --git a/packages/app/src/Spotlights.tsx b/packages/app/src/Spotlights.tsx
@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
 import { Spotlight, SpotlightActionData } from '@mantine/spotlight';
 
 import api from './api';
-import { SERVICE_DASHBOARD_ENABLED } from './config';
 import Logo from './Icon';
 
 import '@mantine/spotlight/styles.css';
@@ -104,20 +103,16 @@ const useSpotlightActions = () => {
           router.push('/alerts');
         },
       },
-      ...(SERVICE_DASHBOARD_ENABLED
-        ? [
-            {
-              id: 'service-health',
-              group: 'Menu',
-              label: 'Service Health',
-              leftSection: <i className="bi bi-heart-pulse" />,
-              description: 'HTTP, Database and Infrastructure metrics',
-              onClick: () => {
-                router.push('/services');
-              },
-            },
-          ]
-        : []),
+      {
+        id: 'service-health',
+        group: 'Menu',
+        label: 'Service Health',
+        leftSection: <i className="bi bi-heart-pulse" />,
+        description: 'HTTP, Database and Infrastructure metrics',
+        onClick: () => {
+          router.push('/services');
+        },
+      },
       {
         id: 'team-settings',
         group: 'Menu',

diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -14,7 +14,3 @@ export const IS_LOCAL_MODE =
   process.env.NEXT_PUBLIC_IS_LOCAL_MODE ?? 'false' === 'true';
 
 // Features in development
-export const METRIC_ALERTS_ENABLED = process.env.NODE_ENV === 'development';
-export const K8S_METRICS_ENABLED = process.env.NODE_ENV === 'development';
-export const SERVICE_DASHBOARD_ENABLED = process.env.NODE_ENV === 'development';
-export const K8S_DASHBOARD_ENABLED = process.env.NODE_ENV === 'development';