Skip to content

Commit

Permalink
Add K8s events
Browse files Browse the repository at this point in the history
  • Loading branch information
@svc-shorpo
svc-shorpo committed Jan 11, 2024
1 parent bfb08f8 commit e66546d
Show file tree
Hide file tree
Showing 4 changed files with 276 additions and 81 deletions.
47 changes: 40 additions & 7 deletions packages/app/src/LogSidePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,19 @@ import Timestamp from 'timestamp-nano';
import { useQueryParam } from 'use-query-params';
import {
ActionIcon,
Box,
Card,
Group,
Menu,
ScrollArea,
SegmentedControl,
SimpleGrid,
Stack,
TextInput,
} from '@mantine/core';

import HyperJson, { GetLineActions, LineAction } from './components/HyperJson';
import { KubeTimeline } from './components/KubeComponents';
import { Table } from './components/Table';
import api from './api';
import {
Expand Down Expand Up @@ -2293,7 +2299,6 @@ const ExceptionSubpanel = ({
</div>
);
};
import { Card, SimpleGrid, Stack } from '@mantine/core';

import { convertDateRangeToGranularityString, Granularity } from './ChartUtils';

Expand Down Expand Up @@ -2465,12 +2470,40 @@ const MetricsSubpanel = ({ logData }: { logData?: any }) => {
return (
<Stack my="md" spacing={40}>
{podUid && (
<MetricsSubpanelGroup
title="Pod Metrics"
where={`k8s.pod.uid:"${podUid}"`}
fieldPrefix="k8s.pod."
timestamp={timestamp}
/>
<div>
<MetricsSubpanelGroup
title="Pod Metrics"
where={`k8s.pod.uid:"${podUid}"`}
fieldPrefix="k8s.pod."
timestamp={timestamp}
/>
<Card p="md" mt="xl">
<Card.Section p="md" py="xs" withBorder>
Pod Timeline
</Card.Section>
<Card.Section>
<ScrollArea
viewportProps={{
style: { maxHeight: 280 },
}}
>
<Box p="md" py="sm">
<KubeTimeline
q={`k8s.pod.uid:"${podUid}"`}
dateRange={[
sub(new Date(timestamp), { days: 1 }),
add(new Date(timestamp), { days: 1 }),
]}
anchorEvent={{
label: <div className="text-success">This Event</div>,
timestamp: new Date(timestamp).toISOString(),
}}
/>
</Box>
</ScrollArea>
</Card.Section>
</Card>
</div>
)}
{nodeName && (
<MetricsSubpanelGroup
Expand Down
26 changes: 13 additions & 13 deletions packages/app/src/PodDetailsSidePanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from 'react';
import Drawer from 'react-modern-drawer';
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
import { Box, Card, Grid, Text } from '@mantine/core';
import { Box, Card, Grid, ScrollArea, Text } from '@mantine/core';

import { KubeTimeline } from './components/KubeComponents';
import api from './api';
import {
convertDateRangeToGranularityString,
Expand Down Expand Up @@ -126,7 +127,7 @@ export default function PodDetailsSidePanel() {
<Box p="md">
<Text size="md">Details for {podName}</Text>
</Box>
<Box className="w-100 overflow-auto" px="sm">
<Box className="w-100" px="sm">
<Grid>
<PodDetails podName={podName} dateRange={dateRange} />
<Grid.Col span={6}>
Expand Down Expand Up @@ -180,19 +181,18 @@ export default function PodDetailsSidePanel() {
<Grid.Col span={12}>
<Card p="md">
<Card.Section p="md" py="xs" withBorder>
Latest Kubernetes Events
Latest Pod Events
</Card.Section>
<Card.Section p="md" py="sm" h={CHART_HEIGHT}>
<LogTableWithSidePanel
config={{
dateRange,
where: where + ' k8s.resource.name:"events"',
<Card.Section>
<ScrollArea
viewportProps={{
style: { maxHeight: CHART_HEIGHT },
}}
isLive={false}
isUTC={false}
setIsUTC={() => {}}
onPropertySearchClick={() => {}}
/>
>
<Box p="md" py="sm">
<KubeTimeline q={`k8s.pod.name:"${podName}"`} />
</Box>
</ScrollArea>
</Card.Section>
</Card>
</Grid.Col>
Expand Down
129 changes: 68 additions & 61 deletions packages/app/src/ServiceDashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Flex,
Grid,
Group,
ScrollArea,
Select,
Skeleton,
Table,
Expand Down Expand Up @@ -155,74 +156,80 @@ const InfraPodsStatusTable = ({
Pods
</Card.Section>
<Card.Section>
{isError ? (
<div className="p-4 text-center text-slate-500 fs-8">
Unable to load pod metrics
</div>
) : (
<Table horizontalSpacing="md" highlightOnHover>
<thead className="muted-thead">
<tr>
<th>Name</th>
<th style={{ width: 100 }}>Restarts</th>
{/* <th style={{ width: 120 }}>Age</th> */}
<th style={{ width: 100 }}>CPU Avg</th>
<th style={{ width: 100 }}>Mem Avg</th>
<th style={{ width: 130 }}>Status</th>
</tr>
</thead>
{isLoading ? (
<tbody>
{Array.from({ length: 4 }).map((_, index) => (
<tr key={index}>
<td>
<Skeleton height={8} my={6} />
</td>
<td>
<Skeleton height={8} />
</td>
<td>
<Skeleton height={8} />
</td>
<td>
<Skeleton height={8} />
</td>
<td>
<Skeleton height={8} />
</td>
</tr>
))}
</tbody>
) : (
<tbody>
{data?.data?.map((row: any) => (
<Link key={row.group} href={getLink(row)}>
<tr className="cursor-pointer">
<td>{row.group}</td>
<td>{row['series_0.data']}</td>
{/* <td>{formatDistanceStrict(row['series_1.data'] * 1000, 0)}</td> */}
<ScrollArea
viewportProps={{
style: { maxHeight: 300 },
}}
>
{isError ? (
<div className="p-4 text-center text-slate-500 fs-8">
Unable to load pod metrics
</div>
) : (
<Table horizontalSpacing="md" highlightOnHover>
<thead className="muted-thead">
<tr>
<th>Name</th>
<th style={{ width: 100 }}>Restarts</th>
{/* <th style={{ width: 120 }}>Age</th> */}
<th style={{ width: 100 }}>CPU Avg</th>
<th style={{ width: 100 }}>Mem Avg</th>
<th style={{ width: 130 }}>Status</th>
</tr>
</thead>
{isLoading ? (
<tbody>
{Array.from({ length: 4 }).map((_, index) => (
<tr key={index}>
<td>
<Skeleton height={8} my={6} />
</td>
<td>
<Skeleton height={8} />
</td>
<td>
{formatNumber(
row['series_2.data'],
K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
)}
<Skeleton height={8} />
</td>
<td>
{formatNumber(
row['series_3.data'],
K8S_MEM_NUMBER_FORMAT,
)}
<Skeleton height={8} />
</td>
<td>
<FormatPodStatus status={row['series_4.data']} />
<Skeleton height={8} />
</td>
</tr>
</Link>
))}
</tbody>
)}
</Table>
)}
))}
</tbody>
) : (
<tbody>
{data?.data?.map((row: any) => (
<Link key={row.group} href={getLink(row)}>
<tr className="cursor-pointer">
<td>{row.group}</td>
<td>{row['series_0.data']}</td>
{/* <td>{formatDistanceStrict(row['series_1.data'] * 1000, 0)}</td> */}
<td>
{formatNumber(
row['series_2.data'],
K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
)}
</td>
<td>
{formatNumber(
row['series_3.data'],
K8S_MEM_NUMBER_FORMAT,
)}
</td>
<td>
<FormatPodStatus status={row['series_4.data']} />
</td>
</tr>
</Link>
))}
</tbody>
)}
</Table>
)}
</ScrollArea>
</Card.Section>
</Card>
);
Expand Down

0 comments on commit e66546d

Please sign in to comment.