feat : Group chaos infra in infrastructure selection modal (litmuschaos#4779)

* Adding environment filter in Infrastructure selection modal

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* setting initialAllInfrastructureLength as 0 initially

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* making InitialAllInfrastructureLength consistent

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* Scroll env list and Pagination(infra)

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* added preSelectedEnvironmentID

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* Minor changes in code

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* Refactored code

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* Changing height of infralist section

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* Minor improvements

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

---------

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>
Co-authored-by: Sahil <sahil.kumar@harness.io>
Co-authored-by: Saranya Jena <saranya.jena@harness.io>
Signed-off-by: andoriyaprashant <prashantandoriya@gmail.com>

Author: 3 people

chaoscenter/web/src/api/entities/environment.ts

@@ -23,3 +23,9 @@ export interface EnvironmentSortInput {
   field: SortType;
   ascending: boolean;
 }
+
+export interface EnvironmentDetail {
+  envName: string;
+  envID: string;
+  totalInfra?: number | null;
+}

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

@@ -3,31 +3,55 @@ import React from 'react';
 import { listChaosInfra } from '@api/core';
 import { getScope } from '@utils';
 import ChaosInfrastructureReferenceFieldView from '@views/ChaosInfrastructureReferenceField';
-import type { ChaosInfrastructureReferenceFieldProps } from '@models';
+import { AllEnv, 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, setLimit] = React.useState<number>(5);
+  const [envID, setEnvID] = React.useState<string>(AllEnv.AllEnv);
+  const [initialAllInfrastructureLength, setInitialAllInfrastructureLength] = React.useState<number>(0);
 
   const { data: listChaosInfraData, loading: listChaosInfraLoading } = listChaosInfra({
     ...scope,
-    filter: { name: searchInfrastructure, isActive: true },
+    environmentIDs: envID === AllEnv.AllEnv ? 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 === AllEnv.AllEnv) {
+      setInitialAllInfrastructureLength(listChaosInfraData?.listInfras.totalNoOfInfras || 0);
+    }
+  }, [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 +62,16 @@ function KubernetesChaosInfrastructureReferenceFieldController({
     environmentID: preSelectedInfrastructure?.environmentID
   };
 
+  React.useEffect(() => {
+    setPage(0);
+  }, [envID]);
+
+  React.useEffect(() => {
+    if (preSelectedEnvironment) {
+      setEnvID(preSelectedEnvironment?.environmentID);
+    }
+  }, [preSelectedEnvironment, setFieldValue]);
+
   React.useEffect(() => {
     if (preSelectedInfrastructure) {
       setFieldValue('chaosInfrastructure.id', preSelectedInfrastructure.infraID, true);
@@ -69,7 +103,10 @@ function KubernetesChaosInfrastructureReferenceFieldController({
         pageSize={limit}
         pageCount={Math.ceil(totalNoOfInfras / limit)}
         pageIndex={page}
-        gotoPage={pageNumber => setPage(pageNumber)}
+        gotoPage={setPage}
+        showPagination={true}
+        pageSizeOptions={[5, 10, 15]}
+        onPageSizeChange={setLimit}
       />
     );
   };
@@ -87,6 +124,10 @@ function KubernetesChaosInfrastructureReferenceFieldController({
       }}
       searchInfrastructure={searchInfrastructure}
       setSearchInfrastructure={setSearchInfrastructure}
+      allInfrastructureLength={initialAllInfrastructureLength}
+      environmentList={environmentList}
+      envID={envID}
+      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 {
@@ -64,6 +65,10 @@ export interface InitialValueProps {
   tolerationValues?: Array<Toleration>;
 }
 
+export enum AllEnv {
+  AllEnv = 'All'
+}
+
 export interface DeploymentScopeItem extends CollapsableSelectOptions {
   type: DeploymentScopeOptions;
   name: string;

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,14 +60,13 @@
   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;
 }
 
 .notSelected {
   background: #fafbfc;
-  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;
   cursor: pointer;
 }
 
@@ -78,14 +77,13 @@
 
 .agentListInnerContainer {
   flex-grow: 1;
-  overflow: auto;
   gap: 1rem;
-  max-height: calc(100% - 48px);
+  overflow: auto;
 }
 
 .item {
   display: grid;
-  grid-template-columns: 5fr 4fr 25px;
+  grid-template-columns: 3fr 4fr 25px;
   align-items: center;
   gap: 0.5rem;
 
@@ -95,7 +93,6 @@
   }
 
   .iconCheck {
-    visibility: hidden;
     margin-right: var(--spacing-xsmall);
     margin-left: var(--spacing-xsmall);
     cursor: pointer;
@@ -104,7 +101,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 +139,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%;
@@ -170,11 +175,6 @@
   position: fixed;
 }
 
-.gap-4 {
-  gap: 1rem;
-  overflow: auto;
-}
-
 .paginationContainer {
   padding-top: 8px;
   overflow: hidden;
@@ -190,3 +190,37 @@
     }
   }
 }
+
+.listEnvContainer {
+  background: var(--primary-1);
+  box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.itemEnv {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 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,24 +1,28 @@
 declare namespace ChaosInfrastructureReferenceFieldModuleScssNamespace {
   export interface IChaosInfrastructureReferenceFieldModuleScss {
+    activeEnv: string;
     agentList: string;
     agentListInnerContainer: string;
+    center: string;
     container: string;
     dialog: string;
     editBtn: string;
     fixed: string;
-    gap4: string;
     gitBranchIcon: string;
     gitInfo: string;
     greenStatus: string;
     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;
   }