fix: Adjusting K8s infra queries (#217)

hyperdxio · Jan 11, 2024 · 0824822 · 0824822
1 parent 76d7d73
commit 0824822
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 7 deletions.
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
@@ -3,6 +3,7 @@ import Drawer from 'react-modern-drawer';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { Box, Card, Grid, Text } from '@mantine/core';
 
+import api from './api';
 import {
   convertDateRangeToGranularityString,
   K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
@@ -18,6 +19,70 @@ import styles from '../styles/LogSidePanel.module.scss';
 const CHART_HEIGHT = 300;
 const defaultTimeRange = parseTimeQuery('Past 1h', false);
 
+const PodDetailsProperty = React.memo(
+  ({ label, value }: { label: string; value?: string }) => {
+    if (!value) return null;
+    return (
+      <div className="pe-4">
+        <Text size="xs" color="gray.6">
+          {label}
+        </Text>
+        <Text size="sm" color="gray.3">
+          {value}
+        </Text>
+      </div>
+    );
+  },
+);
+
+const PodDetails = ({
+  podName,
+  dateRange,
+}: {
+  podName: string;
+  dateRange: [Date, Date];
+}) => {
+  const { data } = api.useLogBatch({
+    q: `k8s.pod.name:"${podName}"`,
+    limit: 1,
+    startDate: dateRange[0] ?? new Date(),
+    endDate: dateRange[1] ?? new Date(),
+    extraFields: [
+      'k8s.node.name',
+      'k8s.pod.name',
+      'k8s.pod.uid',
+      'k8s.namespace.name',
+      'k8s.deployment.name',
+    ],
+    order: 'desc',
+  });
+
+  const properties = data?.pages?.[0]?.data?.[0] || {};
+
+  // If all properties are empty, don't show the panel
+  if (Object.values(properties).every(v => !v)) {
+    return null;
+  }
+
+  return (
+    <Grid.Col span={12}>
+      <div className="p-2 gap-2 d-flex flex-wrap">
+        <PodDetailsProperty label="Node" value={properties['k8s.node.name']} />
+        <PodDetailsProperty label="Pod" value={properties['k8s.pod.name']} />
+        <PodDetailsProperty label="Pod UID" value={properties['k8s.pod.uid']} />
+        <PodDetailsProperty
+          label="Namespace"
+          value={properties['k8s.namespace.name']}
+        />
+        <PodDetailsProperty
+          label="Deployment"
+          value={properties['k8s.deployment.name']}
+        />
+      </div>
+    </Grid.Col>
+  );
+};
+
 export default function PodDetailsSidePanel() {
   const [podName, setPodName] = useQueryParam(
     'podName',
@@ -63,6 +128,7 @@ export default function PodDetailsSidePanel() {
           </Box>
           <Box className="w-100 overflow-auto" px="sm">
             <Grid>
+              <PodDetails podName={podName} dateRange={dateRange} />
               <Grid.Col span={6}>
                 <Card p="md">
                   <Card.Section p="md" py="xs" withBorder>
@@ -110,17 +176,17 @@ export default function PodDetailsSidePanel() {
                     />
                   </Card.Section>
                 </Card>
-              </Grid.Col>{' '}
+              </Grid.Col>
               <Grid.Col span={12}>
                 <Card p="md">
                   <Card.Section p="md" py="xs" withBorder>
-                    Latest Kubernetes Error Events
+                    Latest Kubernetes Events
                   </Card.Section>
                   <Card.Section p="md" py="sm" h={CHART_HEIGHT}>
                     <LogTableWithSidePanel
                       config={{
                         dateRange,
-                        where: where + ' level:error',
+                        where: where + ' k8s.resource.name:"events"',
                       }}
                       isLive={false}
                       isUTC={false}

diff --git a/packages/app/src/ServiceDashboardPage.tsx b/packages/app/src/ServiceDashboardPage.tsx
@@ -309,7 +309,7 @@ export default function ServiceDashboardPage() {
     }));
   }, [services]);
 
-  const whereClause = React.useMemo(() => {
+  const podNames = React.useMemo(() => {
     const podNames: Set<string> = new Set();
     if (service) {
       services?.data[service]?.forEach(values => {
@@ -318,13 +318,17 @@ export default function ServiceDashboardPage() {
         }
       });
     }
+    return [...podNames];
+  }, [service, services]);
+
+  const whereClause = React.useMemo(() => {
     // TODO: Rework this query to correctly work on prod
     return [
-      [...podNames].map(podName => `k8s.pod.name:"${podName}"`).join(' OR ') ||
+      podNames.map(podName => `k8s.pod.name:"${podName}"`).join(' OR ') ||
         'k8s.pod.name:*',
       searchQuery,
     ].join(' ');
-  }, [searchQuery, service, services]);
+  }, [podNames, searchQuery]);
 
   // Generate chart config
   const scopeWhereQuery = React.useCallback(
@@ -337,6 +341,13 @@ export default function ServiceDashboardPage() {
     [service, searchQuery],
   );
 
+  // hack to fix when page shows all services even though service is selected
+  if (isServicesLoading && service) {
+    return (
+      <div className="text-center text-slate-400 m-5">Loading services...</div>
+    );
+  }
+
   return (
     <div>
       <Head>
@@ -408,6 +419,21 @@ export default function ServiceDashboardPage() {
             <div className="p-3">
               <Tabs.Panel value="infrastructure">
                 <Grid>
+                  {service && !podNames.length ? (
+                    <>
+                      <Grid.Col span={12}>
+                        <Card p="xl" ta="center">
+                          <Card.Section p="md" py="xs" withBorder>
+                            <div className="fs-8">
+                              <i className="bi bi-exclamation-circle-fill text-slate-400 fs-8 me-2" />
+                              No pods found for service{' '}
+                              <span className="text-white">{service}</span>
+                            </div>
+                          </Card.Section>
+                        </Card>
+                      </Grid.Col>
+                    </>
+                  ) : null}
                   <Grid.Col span={6}>
                     <Card p="md">
                       <Card.Section p="md" py="xs" withBorder>
@@ -471,7 +497,9 @@ export default function ServiceDashboardPage() {
                         <LogTableWithSidePanel
                           config={{
                             dateRange,
-                            where: whereClause + ' level:error',
+                            where:
+                              whereClause +
+                              ' k8s.resource.name:"events" level:error',
                           }}
                           isLive={false}
                           isUTC={false}