feat : Group chaos infra in infrastructure selection modal

chaoscenter/web/src/controllers/KubernetesChaosInfrastructureReferenceField/KubernetesChaosInfrastructureReferenceField.tsx

@@ -1,33 +1,58 @@
 import { Pagination, useToaster } from '@harnessio/uicore';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { listChaosInfra } from '@api/core';
 import { getScope } from '@utils';
 import ChaosInfrastructureReferenceFieldView from '@views/ChaosInfrastructureReferenceField';
 import type { ChaosInfrastructureReferenceFieldProps } from '@models';
 import type { InfrastructureDetails } from '@views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField';
+import { listEnvironment } from '@api/core/environments';
 
 function KubernetesChaosInfrastructureReferenceFieldController({
   setFieldValue,
-  initialInfrastructureID
+  initialInfrastructureID,
+  initialEnvironmentID
 }: ChaosInfrastructureReferenceFieldProps): React.ReactElement {
   const scope = getScope();
   const { showError } = useToaster();
   const [searchInfrastructure, setSearchInfrastructure] = React.useState<string>('');
-
   const [page, setPage] = React.useState<number>(0);
-  const limit = 8;
+  const limit = 5;
+  const [envID, setEnvID] = React.useState<string>('all');
+  const [initialAllInfrastructureLength, setInitialAllInfrastructureLength] = React.useState<number>(0);
+  const [activeEnv, setActiveEnv] = React.useState<string>('all');
 
   const { data: listChaosInfraData, loading: listChaosInfraLoading } = listChaosInfra({
     ...scope,
-    filter: { name: searchInfrastructure, isActive: true },
+    environmentIDs: envID === 'all' ? undefined : [envID],
+    filter: { name: searchInfrastructure },
     pagination: { page, limit },
     options: { onError: error => showError(error.message) }
   });
 
+  const { data: listEnvironmentData } = listEnvironment({
+    ...scope,
+    options: {
+      onError: err => showError(err.message)
+    }
+  });
+
+  const environmentList = listEnvironmentData?.listEnvironments?.environments;
+
+  React.useEffect(() => {
+    if (envID === 'all' && listChaosInfraData?.listInfras?.totalNoOfInfras && searchInfrastructure === '') {
+      setInitialAllInfrastructureLength(listChaosInfraData.listInfras.totalNoOfInfras);
+    }
+  }, [listChaosInfraData]);
+
+  const preSelectedEnvironment = listEnvironmentData?.listEnvironments?.environments?.find(
+    ({ environmentID }) => environmentID === initialEnvironmentID
+  );
+
   // TODO: replace with get API as this becomes empty during edit
   const preSelectedInfrastructure = listChaosInfraData?.listInfras.infras.find(
     ({ infraID }) => infraID === initialInfrastructureID
   );
+
   const preSelectedInfrastructureDetails: InfrastructureDetails | undefined = preSelectedInfrastructure && {
     id: preSelectedInfrastructure?.infraID,
     name: preSelectedInfrastructure?.name,
@@ -38,6 +63,16 @@ function KubernetesChaosInfrastructureReferenceFieldController({
     environmentID: preSelectedInfrastructure?.environmentID
   };
 
+  React.useEffect(() => {
+    setPage(0);
+  }, [envID]);
+
+  useEffect(() => {
+    if (preSelectedEnvironment) {
+      setEnvID(preSelectedEnvironment?.environmentID), setActiveEnv(preSelectedEnvironment?.environmentID);
+    }
+  }, [preSelectedEnvironment, setFieldValue]);
+
   React.useEffect(() => {
     if (preSelectedInfrastructure) {
       setFieldValue('chaosInfrastructure.id', preSelectedInfrastructure.infraID, true);
@@ -47,7 +82,7 @@ function KubernetesChaosInfrastructureReferenceFieldController({
     }
   }, [preSelectedInfrastructure, setFieldValue]);
 
-  const infrastructureList = listChaosInfraData?.listInfras.infras.map(infra => {
+  const infrastructureList = listChaosInfraData?.listInfras?.infras.map(infra => {
     const infraDetails: InfrastructureDetails = {
       id: infra.infraID,
       name: infra.name,
@@ -85,8 +120,13 @@ function KubernetesChaosInfrastructureReferenceFieldController({
           setFieldValue('chaosInfrastructure.environmentID', infrastructure.environmentID, false);
         }
       }}
+      activeEnv={activeEnv}
+      setActiveEnv={setActiveEnv}
       searchInfrastructure={searchInfrastructure}
       setSearchInfrastructure={setSearchInfrastructure}
+      allInfrastructureLength={initialAllInfrastructureLength}
+      environmentList={environmentList}
+      setEnvID={setEnvID}
       loading={{
         listChaosInfra: listChaosInfraLoading
       }}

chaoscenter/web/src/models/chaosInfrastructure.ts

@@ -31,6 +31,7 @@ export function getChaosInfrastructureStatus(
 export interface ChaosInfrastructureReferenceFieldProps {
   setFieldValue: FormikHelpers<ExperimentMetadata>['setFieldValue'];
   initialInfrastructureID: string | undefined;
+  initialEnvironmentID: string | undefined;
 }
 
 export enum DeploymentScopeOptions {

chaoscenter/web/src/strings/strings.en.yaml

@@ -486,6 +486,7 @@ infrastructureRegistered: >-
   Environment -> Infrastructure list.
 infrastructureStates: Learn more about the states of Infrastructure
 infrastructureType: Infrastructure type
+infrastructures: Infrastructures
 initialDelay: Initial Delay
 initialDelaySeconds: Initial Delay Seconds
 insecureSkipVerify: Insecure skip verify

chaoscenter/web/src/strings/types.ts

@@ -409,6 +409,7 @@ export interface StringsMap {
   'infrastructureRegistered': unknown
   'infrastructureStates': unknown
   'infrastructureType': unknown
+  'infrastructures': unknown
   'initialDelay': unknown
   'initialDelaySeconds': unknown
   'insecureSkipVerify': unknown

chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss

@@ -2,7 +2,7 @@
   padding: var(--spacing-xlarge) !important;
 
   &.dialog {
-    width: 833px;
+    width: 912px;
     height: 86vh;
     max-height: 989px;
   }
@@ -60,32 +60,33 @@
   background: #effbff;
   border: 1.5px solid #0278d5;
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
-  border-radius: 4px;
+  border-radius: 8px !important;
 }
 
 .notSelected {
   background: #fafbfc;
-  border: 1px solid rgba(40, 41, 61, 0.3);
+  // border: 1px solid rgba(40, 41, 61, 0.3);
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
-  border-radius: 4px;
+  border-radius: 8px !important;
   cursor: pointer;
 }
 
 .agentList {
   flex-grow: 1;
   gap: 1rem;
+  overflow: auto;
 }
 
 .agentListInnerContainer {
   flex-grow: 1;
-  overflow: auto;
+  // overflow: auto;
   gap: 1rem;
   max-height: calc(100% - 48px);
 }
 
 .item {
   display: grid;
-  grid-template-columns: 5fr 4fr 25px;
+  grid-template-columns: 3fr 4fr 25px;
   align-items: center;
   gap: 0.5rem;
 
@@ -95,7 +96,6 @@
   }
 
   .iconCheck {
-    visibility: hidden;
     margin-right: var(--spacing-xsmall);
     margin-left: var(--spacing-xsmall);
     cursor: pointer;
@@ -104,7 +104,15 @@
     > svg {
       > path {
         stroke-width: 1;
-        stroke: var(--grey-500);
+        stroke: var(--grey-100);
+      }
+    }
+  }
+  .iconCheck:hover {
+    > svg {
+      > path {
+        stroke-width: 1;
+        stroke: var(--green-500);
       }
     }
   }
@@ -134,7 +142,7 @@
 .gitInfo {
   display: grid;
   grid-template-columns: 4fr 5fr;
-  padding: 6px 8px;
+  padding: 4px 8px;
   background: var(--grey-100) !important;
   border-radius: 8px !important;
   width: 100%;
@@ -172,7 +180,7 @@
 
 .gap-4 {
   gap: 1rem;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .paginationContainer {
@@ -190,3 +198,37 @@
     }
   }
 }
+
+.listEnvContainer {
+  background: #effbff;
+  box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
+  border-radius: 8px !important;
+  cursor: pointer;
+}
+
+.itemEnv {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 3fr 25px;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.activeEnv {
+  border: 1px solid var(--primary-7);
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
+
+  img {
+    width: 200px;
+  }
+}
+
+.rounded {
+  border-radius: 999px;
+}

chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss.d.ts

@@ -1,7 +1,9 @@
 declare namespace ChaosInfrastructureReferenceFieldModuleScssNamespace {
   export interface IChaosInfrastructureReferenceFieldModuleScss {
+    activeEnv: string;
     agentList: string;
     agentListInnerContainer: string;
+    center: string;
     container: string;
     dialog: string;
     editBtn: string;
@@ -13,12 +15,15 @@ declare namespace ChaosInfrastructureReferenceFieldModuleScssNamespace {
     iconCheck: string;
     iconChecked: string;
     item: string;
+    itemEnv: string;
     leftInfo: string;
+    listEnvContainer: string;
     notSelected: string;
     paginationContainer: string;
     placeholder: string;
     redStatus: string;
     referenceSelect: string;
+    rounded: string;
     selected: string;
     status: string;
   }