diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx index 04511a4b8..10659d0f0 100644 --- a/packages/app/src/KubernetesDashboardPage.tsx +++ b/packages/app/src/KubernetesDashboardPage.tsx @@ -116,7 +116,7 @@ type InfraPodsStatusTableColumn = | 'memLimit' | 'phase'; -const InfraPodsStatusTable = ({ +export const InfraPodsStatusTable = ({ dateRange, where, }: { diff --git a/packages/app/src/ServiceDashboardPage.tsx b/packages/app/src/ServiceDashboardPage.tsx index 37dcf0951..f275dcff8 100644 --- a/packages/app/src/ServiceDashboardPage.tsx +++ b/packages/app/src/ServiceDashboardPage.tsx @@ -5,23 +5,18 @@ import Link from 'next/link'; import { StringParam, useQueryParam, withDefault } from 'use-query-params'; import { Anchor, - Badge, Box, Button, Card, Flex, Grid, Group, - ScrollArea, SegmentedControl, Select, - Skeleton, - Table, Tabs, Text, } from '@mantine/core'; -import { FormatPodStatus } from './components/KubeComponents'; import api from './api'; import { convertDateRangeToGranularityString, @@ -39,6 +34,7 @@ import HDXLineChart from './HDXLineChart'; import HDXListBarChart from './HDXListBarChart'; import HDXMultiSeriesTableChart from './HDXMultiSeriesTableChart'; import HDXMultiSeriesTimeChart from './HDXMultiSeriesTimeChart'; +import { InfraPodsStatusTable } from './KubernetesDashboardPage'; import { withAppNav } from './layout'; import { LogTableWithSidePanel } from './LogTableWithSidePanel'; import PodDetailsSidePanel from './PodDetailsSidePanel'; @@ -46,154 +42,6 @@ import HdxSearchInput from './SearchInput'; import SearchTimeRangePicker from './SearchTimeRangePicker'; import { parseTimeQuery, useTimeQuery } from './timeQuery'; import { ChartSeries } from './types'; -import { formatNumber } from './utils'; - -const InfraPodsStatusTable = ({ - dateRange, - where, -}: { - dateRange: [Date, Date]; - where: string; -}) => { - const { data, isError, isLoading } = api.useMultiSeriesChart({ - series: [ - { - table: 'metrics', - field: 'k8s.container.restarts - Gauge', - type: 'table', - aggFn: 'last_value', - where, - groupBy: ['k8s.pod.name'], - }, - { - table: 'metrics', - field: 'k8s.pod.uptime - Sum', - type: 'table', - aggFn: 'sum', - where, - groupBy: ['k8s.pod.name'], - }, - { - table: 'metrics', - field: 'k8s.pod.cpu.utilization - Gauge', - type: 'table', - aggFn: 'avg', - where, - groupBy: ['k8s.pod.name'], - }, - { - table: 'metrics', - field: 'k8s.pod.memory.usage - Gauge', - type: 'table', - aggFn: 'avg', - where, - groupBy: ['k8s.pod.name'], - }, - { - table: 'metrics', - field: 'k8s.pod.phase - Gauge', - type: 'table', - aggFn: 'last_value', - where, - groupBy: ['k8s.pod.name'], - sortOrder: 'asc', - }, - ], - endDate: dateRange[1] ?? new Date(), - startDate: dateRange[0] ?? new Date(), - seriesReturnType: 'column', - }); - - const getLink = (row: any) => { - const searchParams = new URLSearchParams(window.location.search); - searchParams.set('podName', `${row.group}`); - return window.location.pathname + '?' + searchParams.toString(); - }; - - return ( - - - Pods - - - - {isError ? ( -
- Unable to load pod metrics -
- ) : ( - - - - - - {/* */} - - - - - - {isLoading ? ( - - {Array.from({ length: 4 }).map((_, index) => ( - - - - - - - - ))} - - ) : ( - - {data?.data?.map((row: any) => ( - - - - - {/* */} - - - - - - ))} - - )} -
NameRestartsAgeCPU AvgMem AvgStatus
- - - - - - - - - -
{row.group}{row['series_0.data']}{formatDistanceStrict(row['series_1.data'] * 1000, 0)} - {formatNumber( - row['series_2.data'], - K8S_CPU_PERCENTAGE_NUMBER_FORMAT, - )} - - {formatNumber( - row['series_3.data'], - K8S_MEM_NUMBER_FORMAT, - )} - - -
- )} -
-
-
- ); -}; const SearchInput = React.memo( ({