feat: Add cdpipeline compact view mode (#511)

epam · Dec 9, 2024 · 254320f · 254320f
1 parent f925316
commit 254320f
Show file tree

Hide file tree

Showing 11 changed files with 230 additions and 116 deletions.
diff --git a/src/icons/iconify-icons-mapping.ts b/src/icons/iconify-icons-mapping.ts
@@ -42,6 +42,8 @@ export enum ICONS {
   SETTINGS = 'solar:settings-outline',
   VIEW_TABLE = 'ph:table',
   VIEW_GRID = 'ph:grid-nine',
+  VIEW_DETAILS_LESS = 'gg:details-less',
+  VIEW_DETAILS_MORE = 'gg:details-more',
   BASKET = 'mdi:shopping-outline',
   REGISTRY = 'carbon:container-registry',
   UPDATE = 'radix-icons:update',

diff --git a/...ils/components/StageList/components/EnvironmentStage/components/ApplicationCard/index.tsx b/...ils/components/StageList/components/EnvironmentStage/components/ApplicationCard/index.tsx
@@ -1,10 +1,18 @@
 import { Icon } from '@iconify/react';
 import { Link } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import { Button, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Stack,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import moment from 'moment';
 import React from 'react';
 import { ConditionalWrapper } from '../../../../../../../../components/ConditionalWrapper';
-import { LoadingWrapper } from '../../../../../../../../components/LoadingWrapper';
 import { QuickLink } from '../../../../../../../../components/QuickLink';
 import { StatusIcon } from '../../../../../../../../components/StatusIcon';
 import { DEFAULT_CLUSTER } from '../../../../../../../../constants/clusters';
@@ -22,13 +30,13 @@ import {
   SYSTEM_QUICK_LINKS_LABELS,
 } from '../../../../../../../../k8s/groups/EDP/QuickLink/constants';
 import { useDialogContext } from '../../../../../../../../providers/Dialog/hooks';
+import { VIEW_MODES } from '../../../../../../../../providers/ViewMode/types';
 import { LinkCreationService } from '../../../../../../../../services/link-creation';
 import { PodsLogViewerDialog } from '../../../../../../../../widgets/dialogs/PodsLogViewer';
 import { PodsTerminalDialog } from '../../../../../../../../widgets/dialogs/PodsTerminal';
 import { routeComponentDetails } from '../../../../../../../component-details/route';
 import { routeArgoCD } from '../../../../../../../configuration/pages/argocd/route';
 import { StyledChip } from '../../styles';
-import { StyledCard } from './styles';
 import { ApplicationCardProps } from './types';
 
 const formatDate = (date: string): string => {
@@ -42,8 +50,8 @@ export const ApplicationCard = ({
   application,
   argoApplication,
   QuickLinksURLS,
-  CDPipeline,
   stagePods,
+  viewMode,
 }: ApplicationCardProps) => {
   const theme = useTheme();
 
@@ -61,9 +69,9 @@ export const ApplicationCard = ({
     (argoApplication: ApplicationKubeObjectInterface) =>
       LinkCreationService.argocd.createApplicationLink(
         QuickLinksURLS?.[SYSTEM_QUICK_LINKS.ARGOCD],
-        argoApplication.metadata.labels[APPLICATION_LABEL_SELECTOR_PIPELINE],
-        argoApplication.metadata.labels[APPLICATION_LABEL_SELECTOR_STAGE],
-        argoApplication.metadata.labels[APPLICATION_LABEL_SELECTOR_APP_NAME]
+        argoApplication?.metadata.labels[APPLICATION_LABEL_SELECTOR_PIPELINE],
+        argoApplication?.metadata.labels[APPLICATION_LABEL_SELECTOR_STAGE],
+        argoApplication?.metadata.labels[APPLICATION_LABEL_SELECTOR_APP_NAME]
       ),
     [QuickLinksURLS]
   );
@@ -106,73 +114,116 @@ export const ApplicationCard = ({
     };
   }, [argoApplication, applicationPods]);
 
+  const [expanded, setExpanded] = React.useState<string | false>(() =>
+    viewMode === VIEW_MODES.DETAILED ? 'panel1' : false
+  );
+
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  React.useEffect(() => {
+    setExpanded(viewMode === VIEW_MODES.DETAILED ? 'panel1' : false);
+  }, [viewMode]);
+
   return (
-    <LoadingWrapper isLoading={!argoApplication?.status?.health}>
-      <StyledCard variant="outlined">
-        <Stack spacing={1}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Stack direction="row" spacing={2} alignItems="center" sx={{ minWidth: 0 }}>
-              <StatusIcon
-                Title={`Health status: ${argoAppHealthStatus || 'Unknown'}`}
-                icon={argoAppHealthStatusIcon}
-                color={argoAppHealthStatusColor}
-                isRotating={argoAppHealthStatusIconRotating}
-              />
-              <Link
-                routeName={routeComponentDetails.path}
-                params={{
-                  name: application.metadata.name,
-                  namespace: application.metadata.namespace,
-                }}
-                sx={{ minWidth: 0 }}
-              >
-                <Tooltip title={application.metadata.name}>
-                  <Typography
-                    variant="body1"
-                    sx={{
-                      overflow: 'hidden',
-                      whiteSpace: 'nowrap',
-                      textOverflow: 'ellipsis',
-                    }}
-                    color={theme.palette.primary.main}
-                    fontWeight={500}
-                  >
-                    {application.metadata.name}
-                  </Typography>
-                </Tooltip>
-              </Link>
-              <Tooltip title={argoApplication.spec.source.targetRevision}>
+    <Accordion
+      key={viewMode}
+      defaultExpanded={viewMode === VIEW_MODES.DETAILED}
+      expanded={expanded === 'panel1'}
+      onChange={handleChange('panel1')}
+    >
+      <AccordionSummary
+        expandIcon={
+          viewMode === VIEW_MODES.COMPACT ? (
+            <Icon icon={ICONS.ARROW_DOWN} width={20} height={20} />
+          ) : null
+        }
+        sx={{
+          padding: (t) => `${t.typography.pxToRem(8)} ${t.typography.pxToRem(24)}`,
+          minHeight: 'auto !important',
+          cursor: viewMode === VIEW_MODES.COMPACT ? 'pointer' : 'default',
+
+          '& .MuiAccordionSummary-content': {
+            margin: 0,
+          },
+          '& .MuiAccordionSummary-content.Mui-expanded': {
+            margin: 0,
+          },
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          alignItems="center"
+          sx={{ minWidth: 0, width: '100%', pr: theme.typography.pxToRem(16) }}
+          justifyContent="space-between"
+        >
+          <Stack direction="row" spacing={2} alignItems="center">
+            <StatusIcon
+              Title={`Health status: ${argoAppHealthStatus || 'Unknown'}`}
+              icon={argoAppHealthStatusIcon}
+              color={argoAppHealthStatusColor}
+              isRotating={argoAppHealthStatusIconRotating}
+            />
+            <Link
+              routeName={routeComponentDetails.path}
+              params={{
+                name: application.metadata.name,
+                namespace: application.metadata.namespace,
+              }}
+              sx={{ minWidth: 0 }}
+            >
+              <Tooltip title={application.metadata.name}>
                 <Typography
-                  variant="caption"
-                  color={theme.palette.secondary.dark}
+                  variant="body1"
                   sx={{
                     overflow: 'hidden',
                     whiteSpace: 'nowrap',
                     textOverflow: 'ellipsis',
                   }}
+                  color={theme.palette.primary.main}
+                  fontWeight={500}
                 >
-                  {argoApplication.spec.source.targetRevision}
+                  {application.metadata.name}
                 </Typography>
               </Tooltip>
-            </Stack>
-            <Stack direction="row" spacing={1} alignItems="center" flexShrink={0}>
-              <Typography variant="caption" color="primary.dark">
-                Open In:
-              </Typography>
-              <Stack direction="row" spacing={1}>
-                <QuickLink
-                  name={{
-                    label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.ARGOCD],
-                    value: SYSTEM_QUICK_LINKS.ARGOCD,
-                  }}
-                  icon={ICONS.ARGOCD}
-                  externalLink={_createArgoCDLink(argoApplication)}
-                  configurationLink={{
-                    routeName: routeArgoCD.path,
-                  }}
-                  size="small"
-                />
-              </Stack>
+            </Link>
+          </Stack>
+          <Tooltip title={argoApplication?.spec.source.targetRevision}>
+            <Typography
+              variant="caption"
+              color={theme.palette.secondary.dark}
+              sx={{
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {argoApplication ? argoApplication?.spec.source.targetRevision : 'Unknown'}
+            </Typography>
+          </Tooltip>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Stack spacing={1}>
+          <Stack direction="row" spacing={1} alignItems="center" flexShrink={0}>
+            <Typography variant="caption" color="primary.dark">
+              Open In:
+            </Typography>
+            <Stack direction="row" spacing={1}>
+              <QuickLink
+                name={{
+                  label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.ARGOCD],
+                  value: SYSTEM_QUICK_LINKS.ARGOCD,
+                }}
+                icon={ICONS.ARGOCD}
+                externalLink={_createArgoCDLink(argoApplication)}
+                configurationLink={{
+                  routeName: routeArgoCD.path,
+                }}
+                size="small"
+              />
             </Stack>
           </Stack>
           <Stack direction="row" alignItems="center" spacing={2}>
@@ -186,21 +237,17 @@ export const ApplicationCard = ({
               width={16}
             />
           </Stack>
-          <Stack direction="row" alignItems="center" spacing={2}>
-            <Typography variant="caption" color="primary.dark">
-              To promote:
-            </Typography>
-            <Typography variant="caption" color="primary.dark">
-              {CDPipeline.spec.applicationsToPromote.includes(application.metadata.name)
-                ? 'True'
-                : 'False'}
-            </Typography>
-          </Stack>
           <Stack direction="row" alignItems="center" spacing={2}>
             <Typography variant="caption" color="primary.dark">
               Created:
             </Typography>
-            <StyledChip label={formatDate(argoApplication.metadata.creationTimestamp)} />
+            <StyledChip
+              label={
+                argoApplication
+                  ? formatDate(argoApplication?.metadata.creationTimestamp)
+                  : 'Unknown'
+              }
+            />
           </Stack>
           {!isExternalCluster && (
             <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}>
@@ -251,7 +298,7 @@ export const ApplicationCard = ({
             </Stack>
           )}
         </Stack>
-      </StyledCard>
-    </LoadingWrapper>
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/...ails/components/StageList/components/EnvironmentStage/components/ApplicationCard/types.ts b/...ails/components/StageList/components/EnvironmentStage/components/ApplicationCard/types.ts
@@ -1,14 +1,14 @@
 import { ApplicationKubeObjectInterface } from '../../../../../../../../k8s/groups/ArgoCD/Application/types';
 import { PodKubeObjectInterface } from '../../../../../../../../k8s/groups/default/Pod/types';
-import { CDPipelineKubeObjectInterface } from '../../../../../../../../k8s/groups/EDP/CDPipeline/types';
 import { CodebaseKubeObjectInterface } from '../../../../../../../../k8s/groups/EDP/Codebase/types';
 import { StageKubeObjectInterface } from '../../../../../../../../k8s/groups/EDP/Stage/types';
+import { ViewMode } from '../../../../../../../../providers/ViewMode/types';
 
 export interface ApplicationCardProps {
   stage: StageKubeObjectInterface;
   application: CodebaseKubeObjectInterface;
   argoApplication: ApplicationKubeObjectInterface;
   QuickLinksURLS: Record<string, string>;
-  CDPipeline: CDPipelineKubeObjectInterface;
   stagePods: PodKubeObjectInterface[];
+  viewMode: ViewMode;
 }
diff --git a/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx b/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx
@@ -25,6 +25,7 @@ export const EnvironmentStage = ({
   CDPipeline,
   QuickLinksURLS,
   QuickLinks,
+  viewMode,
 }: EnvironmentStageProps) => {
   const theme = useTheme();
 
@@ -190,11 +191,11 @@ export const EnvironmentStage = ({
                   <ApplicationCard
                     key={key}
                     stage={stage}
-                    CDPipeline={CDPipeline}
                     application={el.application}
                     argoApplication={el.argoApplication}
                     QuickLinksURLS={QuickLinksURLS}
                     stagePods={stagePods}
+                    viewMode={viewMode}
                   />
                 ) : null;
               })}

diff --git a/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/styles.ts b/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/styles.ts
@@ -19,7 +19,7 @@ export const StyledCardHeader = styled(Paper, {
     top: 0;
     left: 100%;
     bottom: 0;
-    width: ${theme.typography.pxToRem(16)};
+    width: ${theme.typography.pxToRem(32)};
     height: 100%;
     background-color: inherit;
     clip-path: polygon(0 0, 0% 100%, 100% 50%);
@@ -30,7 +30,9 @@ export const StyledCardHeader = styled(Paper, {
 
 export const StyledCardWrapper = styled('div')(
   ({ theme }) => `
-  padding: ${theme.typography.pxToRem(16)};
+  padding: ${theme.typography.pxToRem(16)} ${theme.typography.pxToRem(
+    32
+  )} ${theme.typography.pxToRem(16)} ${theme.typography.pxToRem(16)};
   background-color: ${theme.palette.secondary.main};
   border-radius: ${theme.typography.pxToRem(4)};
 `

diff --git a/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/types.ts b/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/types.ts
@@ -1,10 +1,12 @@
 import { CDPipelineKubeObjectInterface } from '../../../../../../k8s/groups/EDP/CDPipeline/types';
 import { QuickLinkKubeObjectInterface } from '../../../../../../k8s/groups/EDP/QuickLink/types';
+import { ViewMode } from '../../../../../../providers/ViewMode/types';
 import { StageWithApplicationsData } from '../../../../providers/DynamicData/types';
 
 export interface EnvironmentStageProps {
   CDPipeline: CDPipelineKubeObjectInterface;
   stageWithApplicationsData: StageWithApplicationsData;
   QuickLinksURLS: Record<string, string>;
   QuickLinks: QuickLinkKubeObjectInterface[];
+  viewMode: ViewMode;
 }