feat: Improve reserve logs (#505)

src/k8s/groups/default/ResourceQuota/index.ts

@@ -16,7 +16,6 @@ export class ResourceQuotaKubeObject extends K8s.ResourceClasses.ResourceQuota {
     dataHandler,
     errorHandler,
   }: StreamListProps): () => void {
-    console.log(tenantNamespace);
 
     const url = `/api/${version}/namespaces/${namespace}/${pluralForm}`;
     return streamResults(url, dataHandler, errorHandler, {

src/pages/pipeline-details/components/ReserveLogs/components/AllLogs/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { LogViewer } from '../../../../../../components/LogViewer';
+import { PipelineRouteParams } from '../../../../types';
+import { AllLogsProps } from './types';
+
+export const AllLogs = ({ logs }: AllLogsProps) => {
+  const { name } = useParams<PipelineRouteParams>();
+
+  return (
+    <LogViewer
+      logs={logs.all}
+      downloadName={`fallback-logs-${name}.log`}
+    />
+  );
+};

src/pages/pipeline-details/components/ReserveLogs/components/AllLogs/types.ts

@@ -0,0 +1,5 @@
+import { NormalizedLogs } from '../../../../providers/DynamicData/types';
+
+export interface AllLogsProps {
+  logs: NormalizedLogs;
+}

src/pages/pipeline-details/components/ReserveLogs/components/LogsByTask/index.tsx

@@ -0,0 +1,116 @@
+import { Accordion, Divider, Grid, Paper, Stack, Typography, useTheme } from '@mui/material';
+import React from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import { LogViewer } from '../../../../../../components/LogViewer';
+import { StyledAccordionSummary } from '../../../../styles';
+import { PipelineRouteParams } from '../../../../types';
+import { StyledDetailsBody, StyledDetailsHeader } from '../../../Details/styles';
+import { LogsByTaskProps } from './types';
+
+export const LogsByTask = ({ logs }: LogsByTaskProps) => {
+  const { name } = useParams<PipelineRouteParams>();
+
+  const location = useLocation();
+  const history = useHistory();
+  const queryParams = new URLSearchParams(location.search);
+
+  const setQueryParams = React.useCallback(
+    (taskRun: string) => {
+      const queryParams = new URLSearchParams();
+      if (taskRun) {
+        queryParams.set('taskRun', taskRun);
+      }
+
+      history.push({ search: queryParams.toString() });
+    },
+    [history]
+  );
+
+  const queryParamTaskRun = queryParams.get('taskRun');
+
+  const initialTaskRunName = logs.order[0];
+
+  const handleAccordionChange = (taskRun: string) => () => {
+    setQueryParams(taskRun);
+  };
+
+  React.useEffect(() => {
+    if (!queryParamTaskRun) {
+      setQueryParams(initialTaskRunName);
+    }
+  }, [initialTaskRunName, queryParamTaskRun, setQueryParams]);
+
+  const theme = useTheme();
+
+  const renderDetails = React.useCallback(() => {
+    if (!queryParamTaskRun) {
+      return null;
+    }
+
+    return (
+      <Paper>
+        <StyledDetailsHeader>
+          <Stack spacing={1}>
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <Typography fontSize={(t) => t.typography.pxToRem(20)} fontWeight={500}>
+                {queryParamTaskRun}
+              </Typography>
+            </Stack>
+          </Stack>
+        </StyledDetailsHeader>
+        <Divider orientation="horizontal" />
+        <StyledDetailsBody>
+          <LogViewer
+            logs={logs?.map?.[queryParamTaskRun] || []}
+            downloadName={`fallback-logs-${name}-${queryParamTaskRun}.log`}
+          />
+        </StyledDetailsBody>
+      </Paper>
+    );
+  }, [logs?.map, name, queryParamTaskRun]);
+
+  return (
+    <Grid container rowSpacing={3}>
+      <Grid item xs={2}>
+        <Stack>
+          {logs &&
+            logs.order?.map((taskRunName) => {
+              const isExpanded = queryParamTaskRun === taskRunName;
+              const isActive = queryParamTaskRun === taskRunName;
+
+              return (
+                <Accordion
+                  key={taskRunName}
+                  expanded={isExpanded}
+                  onChange={handleAccordionChange(taskRunName)}
+                  sx={{
+                    borderLeft: isExpanded ? `2px solid ${theme.palette.primary.main}` : null,
+                    maxWidth: isExpanded ? '100%' : '90%',
+
+                    '&.Mui-expanded': {
+                      margin: 0,
+
+                      '&::before': {
+                        opacity: 1,
+                      },
+                    },
+                  }}
+                >
+                  <StyledAccordionSummary
+                    isActive={isActive}
+                    disableRipple={false}
+                    disableTouchRipple={false}
+                  >
+                    <Typography>{taskRunName}</Typography>
+                  </StyledAccordionSummary>
+                </Accordion>
+              );
+            })}
+        </Stack>
+      </Grid>
+      <Grid item xs={10}>
+        {renderDetails()}
+      </Grid>
+    </Grid>
+  );
+};

src/pages/pipeline-details/components/ReserveLogs/components/LogsByTask/types.ts

@@ -0,0 +1,5 @@
+import { NormalizedLogs } from '../../../../providers/DynamicData/types';
+
+export interface LogsByTaskProps {
+  logs: NormalizedLogs;
+}

src/pages/pipeline-details/components/ReserveLogs/hooks/useTabs.tsx

@@ -0,0 +1,43 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { LoadingWrapper } from '../../../../../components/LoadingWrapper';
+import { useDynamicDataContext } from '../../../providers/DynamicData/hooks';
+import { AllLogs } from '../components/AllLogs';
+import { LogsByTask } from '../components/LogsByTask';
+
+export const useTabs = () => {
+  const { logs } = useDynamicDataContext();
+
+  return React.useMemo(() => {
+    return [
+      {
+        label: 'All Logs',
+        component: (
+          <Box
+            sx={{
+              pt: (t) => t.typography.pxToRem(24),
+            }}
+          >
+            <LoadingWrapper isLoading={logs.isLoading}>
+              <AllLogs logs={logs.data} />
+            </LoadingWrapper>
+          </Box>
+        ),
+      },
+      {
+        label: 'Logs By Task',
+        component: (
+          <Box
+            sx={{
+              pt: (t) => t.typography.pxToRem(24),
+            }}
+          >
+            <LoadingWrapper isLoading={logs.isLoading}>
+              <LogsByTask logs={logs.data} />
+            </LoadingWrapper>
+          </Box>
+        ),
+      },
+    ];
+  }, [logs.data, logs.isLoading]);
+};

src/pages/pipeline-details/components/ReserveLogs/index.tsx

@@ -1,116 +1,11 @@
-import { Accordion, Divider, Grid, Paper, Stack, Typography, useTheme } from '@mui/material';
 import React from 'react';
-import { useHistory, useLocation, useParams } from 'react-router-dom';
-import { LogViewer } from '../../../../components/LogViewer';
-import { StyledAccordionSummary } from '../../styles';
-import { PipelineRouteParams } from '../../types';
-import { StyledDetailsBody, StyledDetailsHeader } from '../Details/styles';
-import { ReserveLogsProps } from './types';
+import { Tabs } from '../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../providers/Tabs/hooks';
+import { useTabs } from './hooks/useTabs';
 
-export const ReserveLogs = ({ logs }: ReserveLogsProps) => {
-  const { name } = useParams<PipelineRouteParams>();
+export const ReserveLogs = () => {
+  const tabs = useTabs();
+  const { handleChangeTab, activeTab } = useTabsContext();
 
-  const location = useLocation();
-  const history = useHistory();
-  const queryParams = new URLSearchParams(location.search);
-
-  const setQueryParams = React.useCallback(
-    (taskRun: string) => {
-      const queryParams = new URLSearchParams();
-      if (taskRun) {
-        queryParams.set('taskRun', taskRun);
-      }
-
-      history.push({ search: queryParams.toString() });
-    },
-    [history]
-  );
-
-  const queryParamTaskRun = queryParams.get('taskRun');
-
-  const initialTaskRunName = logs.order[0];
-
-  const handleAccordionChange = (taskRun: string) => () => {
-    setQueryParams(taskRun);
-  };
-
-  React.useEffect(() => {
-    if (!queryParamTaskRun) {
-      setQueryParams(initialTaskRunName);
-    }
-  }, [initialTaskRunName, queryParamTaskRun, setQueryParams]);
-
-  const theme = useTheme();
-
-  const renderDetails = React.useCallback(() => {
-    if (!queryParamTaskRun) {
-      return null;
-    }
-
-    return (
-      <Paper>
-        <StyledDetailsHeader>
-          <Stack spacing={1}>
-            <Stack direction="row" alignItems="center" spacing={2}>
-              <Typography fontSize={(t) => t.typography.pxToRem(20)} fontWeight={500}>
-                {queryParamTaskRun}
-              </Typography>
-            </Stack>
-          </Stack>
-        </StyledDetailsHeader>
-        <Divider orientation="horizontal" />
-        <StyledDetailsBody>
-          <LogViewer
-            logs={logs?.map?.[queryParamTaskRun] || []}
-            downloadName={`fallback-logs-${name}.log`}
-          />
-        </StyledDetailsBody>
-      </Paper>
-    );
-  }, [logs?.map, name, queryParamTaskRun]);
-
-  return (
-    <Grid container rowSpacing={3}>
-      <Grid item xs={2}>
-        <Stack>
-          {logs &&
-            logs.order?.map((taskRunName) => {
-              const isExpanded = queryParamTaskRun === taskRunName;
-              const isActive = queryParamTaskRun === taskRunName;
-
-              return (
-                <Accordion
-                  key={taskRunName}
-                  expanded={isExpanded}
-                  onChange={handleAccordionChange(taskRunName)}
-                  sx={{
-                    borderLeft: isExpanded ? `2px solid ${theme.palette.primary.main}` : null,
-                    maxWidth: isExpanded ? '100%' : '90%',
-
-                    '&.Mui-expanded': {
-                      margin: 0,
-
-                      '&::before': {
-                        opacity: 1,
-                      },
-                    },
-                  }}
-                >
-                  <StyledAccordionSummary
-                    isActive={isActive}
-                    disableRipple={false}
-                    disableTouchRipple={false}
-                  >
-                    <Typography>{taskRunName}</Typography>
-                  </StyledAccordionSummary>
-                </Accordion>
-              );
-            })}
-        </Stack>
-      </Grid>
-      <Grid item xs={10}>
-        {renderDetails()}
-      </Grid>
-    </Grid>
-  );
+  return <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />;
 };

src/pages/pipeline-details/providers/DynamicData/types.ts

@@ -38,6 +38,7 @@ export interface OpensearchResponse {
 export interface NormalizedLogs {
   map: Record<string, string[]>;
   order: string[];
+  all: string[];
 }
 
 export interface DynamicDataContextProviderValue {

src/pages/pipeline-details/providers/DynamicData/utils.ts

@@ -1,8 +1,8 @@
-import { OpensearchResponse } from './types';
+import { NormalizedLogs, OpensearchResponse } from './types';
 
-export const normalizeLogs = (response: OpensearchResponse) => {
+export const normalizeLogs = (response: OpensearchResponse): NormalizedLogs => {
   if (!response?.hits?.hits || !response.hits.hits.length) {
-    return { map: {}, order: [] };
+    return { map: {}, order: [], all: [] };
   }
 
   const result = (response?.hits?.hits || []).reduce(
@@ -18,11 +18,14 @@ export const normalizeLogs = (response: OpensearchResponse) => {
         acc.order.push(taskName);
       }
 
-      acc.map[taskName].push(`${cur._source.log}\n` || '');
+      const logStr = `${cur._source.log}\n` || '';
+
+      acc.map[taskName].push(logStr);
+      acc.all.push(logStr);
       return acc;
     },
-    { map: {}, order: [] }
+    { map: {}, order: [], all: [] }
   );
 
-  return { map: result.map, order: result.order };
+  return { map: result.map, order: result.order, all: result.all };
 };