From 4fd5613074cdcb898db0a92b76f1e6cdd37d942b Mon Sep 17 00:00:00 2001 From: Janhavi Alekar <97527096+JanhaviAlekar@users.noreply.github.com> Date: Fri, 6 Sep 2024 12:01:53 +0530 Subject: [PATCH] feat : Group chaos infra in infrastructure selection modal (#4779) * Adding environment filter in Infrastructure selection modal Signed-off-by: JanhaviAlekar * setting initialAllInfrastructureLength as 0 initially Signed-off-by: JanhaviAlekar * making InitialAllInfrastructureLength consistent Signed-off-by: JanhaviAlekar * Scroll env list and Pagination(infra) Signed-off-by: JanhaviAlekar * added preSelectedEnvironmentID Signed-off-by: JanhaviAlekar * Minor changes in code Signed-off-by: JanhaviAlekar * Refactored code Signed-off-by: JanhaviAlekar * Changing height of infralist section Signed-off-by: JanhaviAlekar * Minor improvements Signed-off-by: JanhaviAlekar --------- Signed-off-by: JanhaviAlekar Co-authored-by: Sahil Co-authored-by: Saranya Jena Signed-off-by: andoriyaprashant --- .../web/src/api/entities/environment.ts | 6 + ...netesChaosInfrastructureReferenceField.tsx | 53 +++- .../web/src/models/chaosInfrastructure.ts | 5 + chaoscenter/web/src/strings/strings.en.yaml | 1 + chaoscenter/web/src/strings/types.ts | 1 + ...osInfrastructureReferenceField.module.scss | 64 +++-- ...rastructureReferenceField.module.scss.d.ts | 6 +- .../ChaosInfrastructureReferenceField.tsx | 254 ++++++++++++------ .../views/StudioOverview/StudioOverview.tsx | 1 + 9 files changed, 290 insertions(+), 101 deletions(-) diff --git a/chaoscenter/web/src/api/entities/environment.ts b/chaoscenter/web/src/api/entities/environment.ts index 7341b84f50e..86fd89b41cf 100644 --- a/chaoscenter/web/src/api/entities/environment.ts +++ b/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; +} diff --git a/chaoscenter/web/src/controllers/KubernetesChaosInfrastructureReferenceField/KubernetesChaosInfrastructureReferenceField.tsx b/chaoscenter/web/src/controllers/KubernetesChaosInfrastructureReferenceField/KubernetesChaosInfrastructureReferenceField.tsx index f7fe8c48d04..e4702f2d01f 100644 --- a/chaoscenter/web/src/controllers/KubernetesChaosInfrastructureReferenceField/KubernetesChaosInfrastructureReferenceField.tsx +++ b/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(''); - const [page, setPage] = React.useState(0); - const limit = 8; + const [limit, setLimit] = React.useState(5); + const [envID, setEnvID] = React.useState(AllEnv.AllEnv); + const [initialAllInfrastructureLength, setInitialAllInfrastructureLength] = React.useState(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 }} diff --git a/chaoscenter/web/src/models/chaosInfrastructure.ts b/chaoscenter/web/src/models/chaosInfrastructure.ts index cc9d530c7aa..ab40a98aa76 100644 --- a/chaoscenter/web/src/models/chaosInfrastructure.ts +++ b/chaoscenter/web/src/models/chaosInfrastructure.ts @@ -31,6 +31,7 @@ export function getChaosInfrastructureStatus( export interface ChaosInfrastructureReferenceFieldProps { setFieldValue: FormikHelpers['setFieldValue']; initialInfrastructureID: string | undefined; + initialEnvironmentID: string | undefined; } export enum DeploymentScopeOptions { @@ -64,6 +65,10 @@ export interface InitialValueProps { tolerationValues?: Array; } +export enum AllEnv { + AllEnv = 'All' +} + export interface DeploymentScopeItem extends CollapsableSelectOptions { type: DeploymentScopeOptions; name: string; diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml index bfe16f64f61..081e1458e7f 100644 --- a/chaoscenter/web/src/strings/strings.en.yaml +++ b/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 diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts index 5d0470c5945..67b32c14278 100644 --- a/chaoscenter/web/src/strings/types.ts +++ b/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 diff --git a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss b/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss index e9ab159eed0..4e61d00ded7 100644 --- a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss +++ b/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; +} diff --git a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss.d.ts b/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss.d.ts index db9d0abfa61..0f0a5adf7fa 100644 --- a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss.d.ts +++ b/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; } diff --git a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.tsx b/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.tsx index 4b55ba44ecc..2a5efa9853b 100644 --- a/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.tsx +++ b/chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.tsx @@ -8,7 +8,8 @@ import { ExpandingSearchInput, Layout, Text, - useToaster + useToaster, + useToggleOpen } from '@harnessio/uicore'; import { Icon } from '@harnessio/icons'; import cx from 'classnames'; @@ -19,6 +20,7 @@ import FallbackBox from '@images/FallbackBox.svg'; import CustomTagsPopover from '@components/CustomTagsPopover'; import Loader from '@components/Loader'; import { useRouteWithBaseUrl } from '@hooks'; +import { Environment, EnvironmentDetail } from '@api/entities'; import css from './ChaosInfrastructureReferenceField.module.scss'; export interface InfrastructureDetails { @@ -34,10 +36,14 @@ export interface InfrastructureDetails { interface ChaosInfrastructureReferenceFieldViewProps { infrastructureList: InfrastructureDetails[] | undefined; + allInfrastructureLength: number | null; + environmentList: Environment[] | undefined; preSelectedInfrastructure?: InfrastructureDetails; setInfrastructureValue: (infrastructure: InfrastructureDetails | undefined) => void; searchInfrastructure: string; setSearchInfrastructure: React.Dispatch>; + setEnvID: (id: string) => void; + envID: string | undefined; loading: { listChaosInfra: boolean; }; @@ -46,32 +52,83 @@ interface ChaosInfrastructureReferenceFieldViewProps { function ChaosInfrastructureReferenceFieldView({ infrastructureList, + environmentList, + allInfrastructureLength, preSelectedInfrastructure, setInfrastructureValue, searchInfrastructure, setSearchInfrastructure, + envID, + setEnvID, loading, pagination }: ChaosInfrastructureReferenceFieldViewProps): JSX.Element { - const [isOpen, setOpen] = React.useState(false); const paths = useRouteWithBaseUrl(); const history = useHistory(); + const [selectedInfrastructure, setSelectedInfrastructure] = React.useState( preSelectedInfrastructure ); - // const searchParams = useSearchParams(); - // const infrastructureType = - // (searchParams.get('infrastructureType') as InfrastructureType | undefined) ?? InfrastructureType.KUBERNETES; + const { isOpen, open, close } = useToggleOpen(); + const { showError } = useToaster(); const { getString } = useStrings(); - const listItem = ({ infrastructure }: { infrastructure: InfrastructureDetails }): JSX.Element => { + const EnvListItem = ({ envDetail }: { envDetail: EnvironmentDetail }): JSX.Element => { + return ( + { + setEnvID(envDetail.envID); + }} + > +
+ + + {envDetail.envName} + + + + {envDetail.totalInfra ?? 0} + +
+ + ); + }; + + const EnvironmentList = ({ env }: { env: Environment }): JSX.Element => { + return ( + + ); + }; + + const InfrastructureListItem = ({ infrastructure }: { infrastructure: InfrastructureDetails }): JSX.Element => { + const isSelected = + selectedInfrastructure?.id === infrastructure.id || preSelectedInfrastructure?.id === infrastructure.id; + return ( { infrastructure.isActive ? setSelectedInfrastructure(infrastructure) @@ -85,7 +142,6 @@ function ChaosInfrastructureReferenceFieldView({ size={12} name="pipeline-approval" /> - {/* */} {infrastructure.name} @@ -124,6 +180,26 @@ function ChaosInfrastructureReferenceFieldView({ ); }; + const NoInfraComponent = (): JSX.Element => { + return ( + + {getString('latestRun')} + + {searchInfrastructure === '' ? getString('newUserNoInfra.title') : getString('noFilteredActiveInfra')} + + {searchInfrastructure === '' && ( +