feat: Add stages filter, Update page filter logic (#142)

Jira: EPMDEDP-13218
Related: #142
Change-Id: I92a9a6ee33c17bca76af1edb774fa86b6217d0f7

src/k8s/Application/index.ts

@@ -1,6 +1,7 @@
 import { ApiProxy, K8s } from '@kinvolk/headlamp-plugin/lib';
 import { STATUS_COLOR } from '../../constants/colors';
 import { ICONS } from '../../icons/iconify-icons-mapping';
+import { ValueOf } from '../../types/global';
 import { streamResults } from '../common/streamResults';
 import { ApplicationKubeObjectConfig } from './config';
 import { APPLICATION_HEALTH_STATUS, APPLICATION_SYNC_STATUS } from './constants';
@@ -35,6 +36,16 @@ export class ApplicationKubeObject extends K8s.cluster.makeKubeObject<Applicatio
     return this.jsonData!.status;
   }
 
+  static parseStatus(
+    argoApp: ApplicationKubeObjectInterface
+  ): ValueOf<typeof APPLICATION_HEALTH_STATUS> {
+    return (
+      (argoApp?.status?.health?.status.toLowerCase() as ValueOf<
+        typeof APPLICATION_HEALTH_STATUS
+      >) || 'unknown'
+    );
+  }
+
   static getHealthStatusIcon(health: string): [string, string, boolean?] {
     if (health === undefined) {
       return [ICONS.UNKNOWN, STATUS_COLOR.UNKNOWN];

src/widgets/EnvironmentStage/components/ApplicationCard/index.tsx → src/pages/edp-cdpipeline-details/components/StageList/components/EnvironmentStage/components/ApplicationCard/index.tsx

@@ -11,26 +11,26 @@ import {
 } from '@mui/material';
 import moment from 'moment';
 import React from 'react';
-import { LoadingWrapper } from '../../../../components/LoadingWrapper';
-import { StatusIcon } from '../../../../components/StatusIcon';
-import { ICONS } from '../../../../icons/iconify-icons-mapping';
-import { ApplicationKubeObject } from '../../../../k8s/Application';
+import { LoadingWrapper } from '../../../../../../../../components/LoadingWrapper';
+import { StatusIcon } from '../../../../../../../../components/StatusIcon';
+import { ICONS } from '../../../../../../../../icons/iconify-icons-mapping';
+import { ApplicationKubeObject } from '../../../../../../../../k8s/Application';
 import {
   APPLICATION_LABEL_SELECTOR_APP_NAME,
   APPLICATION_LABEL_SELECTOR_PIPELINE,
   APPLICATION_LABEL_SELECTOR_STAGE,
-} from '../../../../k8s/Application/labels';
-import { ApplicationKubeObjectInterface } from '../../../../k8s/Application/types';
+} from '../../../../../../../../k8s/Application/labels';
+import { ApplicationKubeObjectInterface } from '../../../../../../../../k8s/Application/types';
 import {
   SYSTEM_EDP_COMPONENTS,
   SYSTEM_EDP_COMPONENTS_LABELS,
-} from '../../../../k8s/EDPComponent/constants';
-import { useEDPComponentsURLsQuery } from '../../../../k8s/EDPComponent/hooks/useEDPComponentsURLsQuery';
-import { routeEDPComponentDetails } from '../../../../pages/edp-component-details/route';
-import { useDialogContext } from '../../../../providers/Dialog/hooks';
-import { LinkCreationService } from '../../../../services/link-creation';
-import { PODS_LOG_VIEWER_DIALOG_NAME } from '../../../PodsLogViewer/constants';
-import { PODS_TERMINAL_DIALOG_NAME } from '../../../PodsTerminal/constants';
+} from '../../../../../../../../k8s/EDPComponent/constants';
+import { useEDPComponentsURLsQuery } from '../../../../../../../../k8s/EDPComponent/hooks/useEDPComponentsURLsQuery';
+import { useDialogContext } from '../../../../../../../../providers/Dialog/hooks';
+import { LinkCreationService } from '../../../../../../../../services/link-creation';
+import { PODS_LOG_VIEWER_DIALOG_NAME } from '../../../../../../../../widgets/PodsLogViewer/constants';
+import { PODS_TERMINAL_DIALOG_NAME } from '../../../../../../../../widgets/PodsTerminal/constants';
+import { routeEDPComponentDetails } from '../../../../../../../edp-component-details/route';
 import { StyledCard, StyledVersionChip } from './styles';
 import { ApplicationCardProps } from './types';
 

src/widgets/EnvironmentStage/components/ApplicationCard/types.ts → src/pages/edp-cdpipeline-details/components/StageList/components/EnvironmentStage/components/ApplicationCard/types.ts

@@ -1,6 +1,6 @@
-import { ApplicationKubeObjectInterface } from '../../../../k8s/Application/types';
-import { EDPCDPipelineStageKubeObjectInterface } from '../../../../k8s/EDPCDPipelineStage/types';
-import { EDPCodebaseKubeObjectInterface } from '../../../../k8s/EDPCodebase/types';
+import { ApplicationKubeObjectInterface } from '../../../../../../../../k8s/Application/types';
+import { EDPCDPipelineStageKubeObjectInterface } from '../../../../../../../../k8s/EDPCDPipelineStage/types';
+import { EDPCodebaseKubeObjectInterface } from '../../../../../../../../k8s/EDPCodebase/types';
 
 export interface ApplicationCardProps {
   stage: EDPCDPipelineStageKubeObjectInterface;

src/widgets/EnvironmentStage/index.tsx → src/pages/edp-cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx

@@ -2,19 +2,21 @@ import { Icon } from '@iconify/react';
 import { Link } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Grid, Paper, Stack, Tooltip, Typography } from '@mui/material';
 import React from 'react';
-import { EDPComponentLink } from '../../components/EDPComponentLink';
-import { LoadingWrapper } from '../../components/LoadingWrapper';
-import { ICONS } from '../../icons/iconify-icons-mapping';
-import { EDPCDPipelineStageKubeObject } from '../../k8s/EDPCDPipelineStage';
+import { EDPComponentLink } from '../../../../../../components/EDPComponentLink';
+import { LoadingWrapper } from '../../../../../../components/LoadingWrapper';
+import { ICONS } from '../../../../../../icons/iconify-icons-mapping';
+import { ApplicationKubeObject } from '../../../../../../k8s/Application';
+import { EDPCDPipelineStageKubeObject } from '../../../../../../k8s/EDPCDPipelineStage';
 import {
   SYSTEM_EDP_COMPONENTS,
   SYSTEM_EDP_COMPONENTS_LABELS,
-} from '../../k8s/EDPComponent/constants';
-import { useEDPComponentsURLsQuery } from '../../k8s/EDPComponent/hooks/useEDPComponentsURLsQuery';
-import { routeEDPComponentDetails } from '../../pages/edp-component-details/route';
-import { routeEDPArgoCDIntegration } from '../../pages/edp-configuration/pages/edp-argocd-integration/route';
-import { routeEDPStageDetails } from '../../pages/edp-stage-details/route';
-import { LinkCreationService } from '../../services/link-creation';
+} from '../../../../../../k8s/EDPComponent/constants';
+import { useEDPComponentsURLsQuery } from '../../../../../../k8s/EDPComponent/hooks/useEDPComponentsURLsQuery';
+import { LinkCreationService } from '../../../../../../services/link-creation';
+import { routeEDPComponentDetails } from '../../../../../edp-component-details/route';
+import { routeEDPArgoCDIntegration } from '../../../../../edp-configuration/pages/edp-argocd-integration/route';
+import { routeEDPStageDetails } from '../../../../../edp-stage-details/route';
+import { usePageFilterContext } from '../../../../hooks/usePageFilterContext';
 import { ApplicationCard } from './components/ApplicationCard';
 import { Arrow } from './components/Arrow';
 import { StyledCardBody, StyledCardHeader, StyledChip } from './styles';
@@ -33,6 +35,33 @@ export const EnvironmentStage = ({
 
   const [, stageStatusColor] = EDPCDPipelineStageKubeObject.getStatusIcon(stageStatus);
 
+  const { filter } = usePageFilterContext();
+
+  const filteredApplications = React.useMemo(() => {
+    const applicationValues = filter.values.application;
+    const healthValue = filter.values.health;
+
+    let _applications = [...applications];
+
+    if (applicationValues && Array.isArray(applicationValues)) {
+      _applications = _applications.filter((el) =>
+        applicationValues.length === 0
+          ? true
+          : applicationValues.includes(el.application.metadata.name)
+      );
+    }
+
+    if (healthValue) {
+      _applications = _applications.filter(
+        (el) =>
+          ApplicationKubeObject.parseStatus(el.argoApplication) === healthValue ||
+          healthValue === 'All'
+      );
+    }
+
+    return _applications;
+  }, [applications, filter]);
+
   return (
     <Paper elevation={1}>
       <LoadingWrapper isLoading={!stageIsLoaded}>
@@ -137,7 +166,7 @@ export const EnvironmentStage = ({
 
         <StyledCardBody>
           <Grid container spacing={4}>
-            {applications.map(el => {
+            {filteredApplications.map((el) => {
               const key = el.argoApplication?.metadata.name;
 
               return el.argoApplication ? (

src/widgets/EnvironmentStage/styles.ts → src/pages/edp-cdpipeline-details/components/StageList/components/EnvironmentStage/styles.ts

@@ -1,8 +1,8 @@
 import { Chip, Paper, styled } from '@mui/material';
-import { TRIGGER_TYPES } from '../../constants/triggerTypes';
+import { TRIGGER_TYPES } from '../../../../../../constants/triggerTypes';
 
 export const StyledCardHeader = styled(Paper, {
-  shouldForwardProp: prop => prop !== 'stageStatusColor',
+  shouldForwardProp: (prop) => prop !== 'stageStatusColor',
 })<{
   stageStatusColor?: string;
 }>(

src/pages/edp-cdpipeline-details/components/StageList/components/EnvironmentStage/types.ts

@@ -0,0 +1,7 @@
+import { EDPCDPipelineKubeObjectInterface } from '../../../../../../k8s/EDPCDPipeline/types';
+import { StageWithApplicationsData } from '../../../../providers/DynamicData/types';
+
+export interface EnvironmentStageProps {
+  CDPipeline: EDPCDPipelineKubeObjectInterface;
+  stageWithApplicationsData: StageWithApplicationsData;
+}