diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx index 7c22f3087..bf731c3ea 100644 --- a/lib/app-setup/root.tsx +++ b/lib/app-setup/root.tsx @@ -32,6 +32,7 @@ import tailwindBase from '~/design-system/tailwind-base.js'; import { ReloadIndicator } from '~/lib/client/components/reload-indicator'; import { isDev } from '~/lib/client/helpers/log'; import { getClientEnv, getServerEnv } from '../configs/base-url.cjs'; +import { isBrowser } from '../client/helpers/is-browser'; import { useDataFromMatches } from '../client/hooks/use-custom-matches'; export const links: LinksFunction = () => [ @@ -201,7 +202,7 @@ const Root = ({ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', ${tagId}); + gtag('config', '${tagId}'); `, }} /> @@ -237,7 +238,7 @@ const Root = ({ - + {isBrowser() && } {error ? (
{JSON.stringify(error)}
) : ( diff --git a/src/apps/console/components/list-grid-view.tsx b/src/apps/console/components/list-grid-view.tsx index 4cfd1793a..653b22e3b 100644 --- a/src/apps/console/components/list-grid-view.tsx +++ b/src/apps/console/components/list-grid-view.tsx @@ -1,5 +1,4 @@ -import { ReactNode, useEffect, useState } from 'react'; -import { IListOrGrid } from '../server/r-utils/common'; +import { ReactNode } from 'react'; import { useViewMode } from './view-mode'; const ListGridView = ({ @@ -10,16 +9,10 @@ const ListGridView = ({ listView: ReactNode; }) => { const { viewMode } = useViewMode(); - const [tempViewMode, setTempViewMode] = useState('list'); - - useEffect(() => { - setTempViewMode(viewMode); - }, [viewMode]); - return (
- {tempViewMode === 'grid' ? gridView : listView} + {viewMode === 'c' ? gridView : listView}
{gridView}
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx index c6579680a..0dc35d986 100644 --- a/src/apps/console/components/sync-status.tsx +++ b/src/apps/console/components/sync-status.tsx @@ -21,7 +21,19 @@ interface IStatusMetaV2 { recordVersion: number; markedForDeletion?: boolean; status?: { - checks?: any; + checks?: { + [key: string]: { + error: string; + generation: number; + message: string; + state: + | 'yet-to-be-reconciled' + | 'under-reconcilation' + | 'errored-during-reconcilation' + | 'finished-reconcilation'; + status: boolean; + }; + }; isReady: boolean; lastReadyGeneration?: number; lastReconcileTime?: any; @@ -151,25 +163,21 @@ const state = ({ } }; -const parseOverallState = (s: IStatusMetaV2['status']): OverallStates => { - const checks: { - [key: string]: { - error: string; - generation: number; - message: string; - state: - | 'yet-to-be-reconciled' - | 'under-reconcilation' - | 'errored-during-reconcilation' - | 'finished-reconcilation'; - status: boolean; - }; - } = s?.checks; +const parseOverallState = (item: IStatusMetaV2): OverallStates => { + const { status, markedForDeletion, syncStatus } = item; + + const checks = status?.checks; + const checkList = status?.checkList; + + if (markedForDeletion && syncStatus.action === 'DELETE') { + return 'deleting'; + } + if (!checks) { return 'idle'; } - const mainStatus = s?.checkList?.reduce( + const mainStatus = checkList?.reduce( (acc, curr) => { const k = checks[curr.name]; if (acc.progress === 'done') { @@ -224,8 +232,6 @@ export const SyncStatusV2 = ({ item: IStatusMetaV2; type?: IStatusViewType; }) => { - const { status } = item; - const parseStage = (check: OverallStates) => { const iconSize = 12; @@ -268,25 +274,17 @@ export const SyncStatusV2 = ({ } }; - const getProgressItems = (s: typeof status) => { - const checks: { - [key: string]: { - error: string; - generation: number; - message: string; - state: - | 'yet-to-be-reconciled' - | 'under-reconcilation' - | 'errored-during-reconcilation' - | 'finished-reconcilation'; - status: boolean; - }; - } = s?.checks; + const getProgressItems = (item: IStatusMetaV2) => { + const { status } = item; + + const checks = status?.checks; + const checkList = status?.checkList; + if (!checks) { return []; } - const items = status?.checkList?.reduce( + const items = checkList?.reduce( (acc, curr) => { const k = checks[curr.name]; if (acc.progress === 'done') { @@ -374,8 +372,8 @@ export const SyncStatusV2 = ({ ], }; - const k = parseOverallState(status); - const ic = getProgressItems(status); + const k = parseOverallState(item); + const ic = getProgressItems(item); return (
@@ -415,5 +413,5 @@ export const SyncStatusV2 = ({ }; export const status = ({ item }: { item: IStatusMetaV2 }) => { - return parseOverallState(item.status); + return parseOverallState(item); }; diff --git a/src/apps/console/components/view-mode.tsx b/src/apps/console/components/view-mode.tsx index 341c3ca5b..7dde61efd 100644 --- a/src/apps/console/components/view-mode.tsx +++ b/src/apps/console/components/view-mode.tsx @@ -14,25 +14,28 @@ import { IListOrGrid } from '../server/r-utils/common'; const ViewModeContext = createContext<{ viewMode: IListOrGrid; setViewMode: (mode: IListOrGrid) => void; -}>({ viewMode: 'list', setViewMode() {} }); +}>({ viewMode: 'r', setViewMode() {} }); -const retriveInitialViewMode = (): IListOrGrid => { - return ( - isBrowser() ? sessionStorage.getItem('ViewMode') || 'list' : 'list' - ) as IListOrGrid; +const setVM = ({ mode }: { mode: IListOrGrid }) => { + sessionStorage.setItem('view-mode', mode); }; -const saveViewMode = ({ mode }: { mode: IListOrGrid }) => { +const getVM = (): IListOrGrid => { if (isBrowser()) { - sessionStorage.setItem('ViewMode', mode); + try { + return (sessionStorage.getItem('view-mode') || 'r') as IListOrGrid; + } catch (err) { + // + } } + return 'r'; }; export const ViewModeProvider = ({ children }: { children: ReactNode }) => { - const [viewMode, setViewMode] = useState(retriveInitialViewMode()); + const [viewMode, setViewMode] = useState(getVM()); useEffect(() => { - saveViewMode({ mode: viewMode }); + setVM({ mode: viewMode }); }, [viewMode]); return ( @@ -55,20 +58,14 @@ export const useViewMode = () => { const ViewMode = () => { const { viewMode, setViewMode } = useViewMode(); - const [tempViewMode, setTempViewMode] = useState('list'); - - useEffect(() => { - setTempViewMode(viewMode); - }, [viewMode]); - return ( - } value="list" /> - } value="grid" /> + } value="r" /> + } value="c" /> ); }; diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx index 556c07bfa..349e612e9 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx @@ -149,7 +149,7 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => { className: 'w-[180px]', }, { - render: () => '', + render: () => 'Status', name: 'status', className: 'flex-1 min-w-[30px] flex items-center justify-center', }, diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx index 0840ad026..6b4e11a14 100644 --- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx @@ -28,6 +28,7 @@ import LogComp from '~/root/lib/client/components/logger'; import LogAction from '~/console/page-components/log-action'; import { useDataState } from '~/console/page-components/common-state'; import { useState } from 'react'; +import { SyncStatusV2 } from '~/console/components/sync-status'; type BaseType = ExtractNodeType; const RESOURCE_NAME = 'cluster'; @@ -227,7 +228,7 @@ const ListView = ({ items }: { items: BaseType[] }) => { // ), // }, status: { - render: () => null, + render: () => , }, provider: { render: () => }, updated: { diff --git a/src/apps/console/server/r-utils/common.ts b/src/apps/console/server/r-utils/common.ts index 8727832b5..63e93eaae 100644 --- a/src/apps/console/server/r-utils/common.ts +++ b/src/apps/console/server/r-utils/common.ts @@ -151,7 +151,7 @@ export type ExtractNodeType = T extends Nodes ? T['edges'][number]['node'] : T; -export type IListOrGrid = 'list' | 'grid' | NonNullableString; +export type IListOrGrid = 'r' | 'c' | NonNullableString; export type wsOrEnv = 'environment' | 'workspace' | NonNullableString; export const parseUpdateTime = (resource: { updateTime: string }) => {