Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat: GA service health dashboard + metrics alerting + k8s dashboard / metrics side panel (#379)

Browse source
This commit is contained in:
Warren 2024-04-19 15:28:20 -07:00 committed by GitHub
parent 3a85c0a790
commit 4d6fb8f17e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 63 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/gold-stingrays-collect.md Normal file
View file

@ -0,0 +1,6 @@
---
'@hyperdx/app': minor
'@hyperdx/api': minor
---
feat: GA service health dashboard + metrics alert

6
.changeset/sweet-singers-cough.md Normal file
View file

@ -0,0 +1,6 @@
---
'@hyperdx/app': minor
'@hyperdx/api': minor
---
feat: GA k8s dashboard / metrics side panel

85
packages/app/src/AppNav.tsx
View file

@ -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

4
packages/app/src/EditChartForm.tsx
View file

@ -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

3
packages/app/src/LogSidePanel.tsx
View file

@ -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',

25
packages/app/src/Spotlights.tsx
View file

@ -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',

4
packages/app/src/config.ts
View file

@ -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';