From 3eeb0bf5e4a7067b5acb0aabc46ed423e8d6a7d7 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Mon, 12 Aug 2024 12:20:51 +0530 Subject: [PATCH] devrel bugs resloved --- src/apps/console/components/sync-status.tsx | 141 +++++++-------- src/apps/console/hooks/use-cluster-status.tsx | 6 +- .../page-components/handle-environment.tsx | 2 +- .../$environment+/apps/apps-resources-v2.tsx | 21 +-- .../external-apps/external-app-resource.tsx | 10 +- .../handle-managed-resource-v2.tsx | 2 +- .../managed-resources-resource-v2.tsx | 6 +- .../environments/clone-environment.tsx | 163 ++++++++---------- .../environments/environment-resources-v2.tsx | 5 +- .../byok-cluster/handle-byok-cluster.tsx | 2 +- .../backend-services-resources-V2.tsx | 6 +- .../app+/$app+/settings+/_layout.tsx | 5 +- 12 files changed, 185 insertions(+), 184 deletions(-) diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx index baa8bf661..244b2dff8 100644 --- a/src/apps/console/components/sync-status.tsx +++ b/src/apps/console/components/sync-status.tsx @@ -7,7 +7,6 @@ import { CircleFill, WarningCircleFill, } from '~/console/components/icons'; -import Tooltip from '~/components/atoms/tooltip'; import { Github__Com___Kloudlite___Api___Pkg___Types__SyncState as ISyncState, Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as ISyncAction, @@ -286,82 +285,84 @@ export const SyncStatusV2 = ({ return []; } - const items = checkList?.reduce( - (acc, curr) => { - const k = checks[curr.name]; - if (acc.progress === 'done') { - acc.items.push({ - ...curr, - result: 'idle', - message: '', - }); - return acc; - } + const items = checkList + ?.filter((cl) => !cl.hide) + .reduce( + (acc, curr) => { + const k = checks[curr.name]; + if (acc.progress === 'done') { + acc.items.push({ + ...curr, + result: 'idle', + message: '', + }); + return acc; + } - const res = ((): { - value: OverallStates; - progress: string; - message: string; - } => { - if (k) { - if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') { - return { - value: 'idle', - message: k.message, - progress: 'done', - }; + const res = ((): { + value: OverallStates; + progress: string; + message: string; + } => { + if (k) { + if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') { + return { + value: 'idle', + message: k.message, + progress: 'done', + }; + } + + if (k.state === 'under-reconcilation') { + return { + value: 'in-progress', + + message: k.message, + progress: 'done', + }; + } + + if (k.state === 'errored-during-reconcilation') { + return { + value: 'error', + message: k.message, + progress: 'done', + }; + } + + if (k.state === 'finished-reconcilation') { + return { + value: 'ready', + message: k.message, + progress: 'init', + }; + } } - if (k.state === 'under-reconcilation') { - return { - value: 'in-progress', + return acc; + })(); - message: k.message, - progress: 'done', - }; - } + acc.items.push({ + ...curr, + result: res?.value, + message: res.message, + }); - if (k.state === 'errored-during-reconcilation') { - return { - value: 'error', - message: k.message, - progress: 'done', - }; - } - - if (k.state === 'finished-reconcilation') { - return { - value: 'ready', - message: k.message, - progress: 'init', - }; - } - } + acc.value = res.value; + acc.progress = res.progress; return acc; - })(); - - acc.items.push({ - ...curr, - result: res?.value, - message: res.message, - }); - - acc.value = res.value; - acc.progress = res.progress; - - return acc; - }, - { - value: 'idle' as OverallStates, - items: [] as ({ - result: OverallStates; - message: string; - } & ICheckList)[], - message: '', - progress: 'init', - } - ); + }, + { + value: 'idle' as OverallStates, + items: [] as ({ + result: OverallStates; + message: string; + } & ICheckList)[], + message: '', + progress: 'init', + } + ); return items?.items; }; diff --git a/src/apps/console/hooks/use-cluster-status.tsx b/src/apps/console/hooks/use-cluster-status.tsx index b7b085810..8c7a92f5d 100644 --- a/src/apps/console/hooks/use-cluster-status.tsx +++ b/src/apps/console/hooks/use-cluster-status.tsx @@ -25,8 +25,10 @@ const useClusterStatus = () => { const api = useConsoleApi(); const [clusters, setClusters] = useState([]); + const [loading, setLoading] = useState(false); const listCluster = useCallback(async () => { + setLoading(true); try { const clusters = await api.listAllClusters(); setClusters(parseNodes(clusters.data) || []); @@ -34,6 +36,8 @@ const useClusterStatus = () => { } catch (err) { console.error(err); return false; + } finally { + setLoading(false); } }, []); @@ -41,7 +45,7 @@ const useClusterStatus = () => { listCluster(); }, []); - return { findClusterStatus, clusters }; + return { findClusterStatus, clusters, loading }; }; export default useClusterStatus; diff --git a/src/apps/console/page-components/handle-environment.tsx b/src/apps/console/page-components/handle-environment.tsx index e65afc615..1acb02fe7 100644 --- a/src/apps/console/page-components/handle-environment.tsx +++ b/src/apps/console/page-components/handle-environment.tsx @@ -135,7 +135,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { clusterName: clusterList.find((c) => c.ready)?.value || '', })); } - }, [clusterList]); + }, [clusterList, show]); return ( { const ListView = ({ items = [], onAction }: IResource) => { const { environment, account, cluster } = useOutletContext(); - const { findClusterStatus, clusters } = useClusterStatus(); + const { findClusterStatus, clusters, loading } = useClusterStatus(); return ( { render: () => , }, status: { - render: () => ( -
- {isClusterOnline ? ( - - ) : ( - Cluster Offline - )} -
- ), + render: () => { + if (loading) { + return null; + } + if (!isClusterOnline) { + return Cluster Offline; + } + + return ; + }, }, updated: { render: () => ( diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx index ac3060560..63e0b1e4b 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx @@ -126,7 +126,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => { icon: , type: 'item', to: `/${account}/env/${environment}/external-app/${parseName( - item, + item )}/settings/general`, key: 'settings', }, @@ -311,7 +311,7 @@ const ListView = ({ items = [], onAction }: IResource) => { environment?.spec?.targetNamespace }.svc.${parseName(cluster)}.local` : `${parseName(i)}.${parseName( - environment, + environment )}.svc.${parseName(cluster)}.local` } /> @@ -337,7 +337,7 @@ const ListView = ({ items = [], onAction }: IResource) => { }, }, to: `/${parseName(account)}/env/${parseName( - environment, + environment )}/external-app/${id}`, }; }), @@ -357,9 +357,9 @@ const ExternalNameResource = ({ items = [] }: Omit) => { useWatchReload( items.map((i) => { return `account:${parseName(account)}.environment:${parseName( - environment, + environment )}.app:${parseName(i)}`; - }), + }) ); const interceptExternalApp = async (item: BaseType, intercept: boolean) => { diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx index bf64f2ae4..8366869e6 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx @@ -198,7 +198,7 @@ const Root = (props: IDialog) => { handleChange('managedServiceName')(dummyEvent(value)); }} error={!!errors.managedServiceName} - message={errors.clusterName} + message={errors.managedServiceName} // loading={msvcIsLoading} /> diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx index 589f4db65..3710a0dab 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx @@ -141,7 +141,7 @@ const GridView = ({ items = [], onAction, templates }: IResource) => { const ListView = ({ items = [], onAction, templates }: IResource) => { const { cluster } = useOutletContext(); - const { findClusterStatus, clusters } = useClusterStatus(); + const { findClusterStatus, clusters, loading } = useClusterStatus(); return ( { }, status: { render: () => { + if (loading) { + return null; + } + if (!isClusterOnline) { return Cluster Offline; } diff --git a/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx b/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx index 6e8ad9b48..7b0370d08 100644 --- a/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx @@ -15,9 +15,8 @@ import { useReload } from '~/root/lib/client/helpers/reloader'; import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; import Yup from '~/root/lib/server/helpers/yup'; import { handleError } from '~/root/lib/utils/common'; -import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr'; import Select from '~/components/atoms/select'; -import { useAppend, useMapper } from '~/components/utils'; +import { useCallback, useEffect, useState } from 'react'; type IDialog = IDialogBase>; @@ -43,97 +42,85 @@ const Root = (props: IDialog) => { const api = useConsoleApi(); const reloadPage = useReload(); - // const { data: clustersData, isLoading: cIsLoading } = useCustomSwr( - // 'clusters', - // async () => api.listClusters({}), - // true - // ); + const [clusterList, setClusterList] = useState([]); - const { data: clustersData, isLoading: cIsLoading } = useCustomSwr( - 'clusters', - async () => - api.listClusters({ - pagination: { - first: 100, - }, - }), - true - ); - - const { data: byokClustersData, isLoading: byokCIsLoading } = useCustomSwr( - 'byokclusters', - async () => - api.listByokClusters({ - pagination: { - first: 100, - }, - }), - true - ); + const getClusters = useCallback(async () => { + try { + const byokClusters = await api.listByokClusters({}); + const data = parseNodes(byokClusters.data).map((c) => ({ + label: c.displayName, + value: parseName(c), + ready: true, + render: () => ( + + ), + })); + setClusterList(data); + } catch (err) { + handleError(err); + } + }, []); - const cData = useMapper(parseNodes(clustersData), (item) => { - return { - label: item.displayName, - value: parseName(item), - ready: item.status?.isReady, - render: () => ( - - ), - }; - }); + useEffect(() => { + getClusters(); + }, []); - const bCData = useMapper(parseNodes(byokClustersData), (item) => { - return { - label: item.displayName, - value: parseName(item), - ready: true, - render: () => ( - - ), - }; + const { + values, + errors, + handleChange, + handleSubmit, + resetValues, + setValues, + isLoading, + } = useForm({ + initialValues: { + name: '', + displayName: '', + environmentRoutingMode: false, + isNameError: false, + clusterName: '', + }, + validationSchema: Yup.object({ + name: Yup.string().required('Name is required.'), + displayName: Yup.string().required(), + clusterName: Yup.string().required(), + }), + onSubmit: async (val) => { + if (isUpdate) { + try { + const { errors: e } = await api.cloneEnvironment({ + displayName: val.displayName, + environmentRoutingMode: val.environmentRoutingMode + ? 'public' + : 'private', + destinationEnvName: val.name, + clusterName: val.clusterName, + sourceEnvName: parseName(props.data), + }); + if (e) { + throw e[0]; + } + resetValues(); + toast.success('Environment cloned successfully'); + setVisible(false); + reloadPage(); + } catch (err) { + handleError(err); + } + } + }, }); - const clusterList = useAppend(cData, bCData); + useEffect(() => { + if (clusterList.length > 0) { + setValues((v) => ({ + ...v, + clusterName: clusterList.find((c) => c.ready)?.value || '', + })); + } + }, [clusterList]); - const { values, errors, handleChange, handleSubmit, resetValues, isLoading } = - useForm({ - initialValues: { - name: '', - displayName: '', - environmentRoutingMode: false, - isNameError: false, - clusterName: '', - }, - validationSchema: Yup.object({ - name: Yup.string().required('Name is required.'), - displayName: Yup.string().required(), - clusterName: Yup.string().required(), - }), - onSubmit: async (val) => { - if (isUpdate) { - try { - const { errors: e } = await api.cloneEnvironment({ - displayName: val.displayName, - environmentRoutingMode: val.environmentRoutingMode - ? 'public' - : 'private', - destinationEnvName: val.name, - clusterName: val.clusterName, - sourceEnvName: parseName(props.data), - }); - if (e) { - throw e[0]; - } - resetValues(); - toast.success('Environment cloned successfully'); - setVisible(false); - reloadPage(); - } catch (err) { - handleError(err); - } - } - }, - }); return ( { @@ -161,7 +148,6 @@ const Root = (props: IDialog) => { label="Select Cluster" size="lg" value={values.clusterName} - disabled={cIsLoading} placeholder="Select a Cluster" options={async () => [ ...((clusterList && @@ -175,7 +161,6 @@ const Root = (props: IDialog) => { }} error={!!errors.clusterName} message={errors.clusterName} - loading={cIsLoading || byokCIsLoading} /> {/* { const ListView = ({ items, onAction }: IResource) => { const { account } = useParams(); - const { findClusterStatus, clusters } = useClusterStatus(); + const { findClusterStatus, clusters, loading } = useClusterStatus(); const { clustersMap } = useOutletContext(); return ( @@ -228,6 +228,9 @@ const ListView = ({ items, onAction }: IResource) => { if (i.isArchived) { return Archived; } + if (loading) { + return null; + } if (!isClusterOnline) { return Cluster Offline; } diff --git a/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx b/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx index 1ae31fc81..b5e60b2a7 100644 --- a/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx +++ b/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx @@ -69,7 +69,7 @@ const Root = (props: IDialog) => { reloadPage(); resetValues(); toast.success( - `byoc cluster ${isUpdate ? 'updated' : 'created'} successfully` + `cluster ${isUpdate ? 'updated' : 'created'} successfully` ); setVisible(false); } catch (err) { diff --git a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx index 1c34327e2..61dbb7fb6 100644 --- a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx +++ b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx @@ -162,7 +162,7 @@ const GridView = ({ items, templates, onAction }: IResource) => { const ListView = ({ items, templates, onAction }: IResource) => { const { account, clustersMap } = useOutletContext(); - const { findClusterStatus, clusters } = useClusterStatus(); + const { findClusterStatus, clusters, loading } = useClusterStatus(); return ( { if (i.isArchived) { return Archived; } + if (loading) { + // return Syncing...; + return null; + } if (!isClusterOnline) { return Cluster Offline; } diff --git a/src/apps/iot-console/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/app+/$app+/settings+/_layout.tsx b/src/apps/iot-console/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/app+/$app+/settings+/_layout.tsx index bcd7a0291..476262729 100644 --- a/src/apps/iot-console/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/app+/$app+/settings+/_layout.tsx +++ b/src/apps/iot-console/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/app+/$app+/settings+/_layout.tsx @@ -41,8 +41,8 @@ const Layout = () => { } = useUnsavedChanges(); const { app, setApp } = useAppState(); - const { deviceblueprint, account } = useOutletContext(); - const [ deviceBlueprintName, appName] = [ + const { deviceblueprint, account } = useOutletContext(); + const [deviceBlueprintName, appName] = [ project.name, deviceblueprint.name, parseName(app), @@ -74,7 +74,6 @@ const Layout = () => { ...getAppIn(app), }, deviceBlueprintName, - }); if (errors) { throw errors[0];