diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx index ee1db4a99..eb67cd09e 100644 --- a/src/apps/console/components/commons.tsx +++ b/src/apps/console/components/commons.tsx @@ -120,7 +120,7 @@ interface IUpdateMeta { } // Component for Status parsing -type IStatus = 'deleting' | 'none'; +export type IStatus = 'deleting' | 'notready' | 'none'; interface IStatusMeta { markedForDeletion?: boolean; @@ -141,7 +141,9 @@ type ICommonMeta = IUpdateMeta & IStatusMeta; const parseStatusComponent = ({ status }: { status: IStatus }) => { switch (status) { case 'deleting': - return
Deleting...
; + return
Deleting...
; + case 'notready': + return
Not Ready
; default: return null; } @@ -152,6 +154,8 @@ export const parseStatus = (item: IStatusMeta) => { if (item.markedForDeletion) { status = 'deleting'; + } else if (!item.status?.isReady) { + status = 'notready'; } return { status, component: parseStatusComponent({ status }) }; @@ -183,6 +187,7 @@ export const listRender = ({ key: generateKey(keyPrefix, 'status'), className, render: () => parseStatus(resource).component, + status: parseStatus(resource).status, }; }, }; diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx index 907431f25..7e47d73d1 100644 --- a/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx +++ b/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx @@ -19,6 +19,7 @@ import { awsRegions } from '~/console/dummy/consts'; import { mapper } from '~/components/utils'; import { IDialogBase } from '~/console/components/types.d'; import { Checkbox } from '~/components/atoms/checkbox'; +import { Switch } from '~/components/atoms/switch'; import { findNodePlan, nodePlans, provisionTypes } from './nodepool-utils'; import { IClusterContext } from '../_.$account.$cluster'; @@ -191,6 +192,13 @@ const Root = (props: IDialog) => {
+ {isUpdate && ( { }} /> )} - {!isUpdate && ( { /> )} -
-
-
AutoScale
-
-
- handleChange('autoScale')(dummyEvent(v))} - label={values.autoScale ? 'Enabled' : 'Disabled'} - /> -
-
-
- { - handleChange('minimum')(e); - if (!values.autoScale) { - handleChange('maximum')(e); - } - }} - /> -
- {values.autoScale && ( +
{ + handleChange('minimum')(e); + if (!values.autoScale) { + handleChange('maximum')(e); + } + }} + /> +
+ {values.autoScale && ( +
+ +
+ )} +
+
+
AutoScale
+
+ handleChange('autoScale')(dummyEvent(v))} />
- )} +
{/* {show?.type === DIALOG_TYPE.ADD && ( */} @@ -353,7 +355,7 @@ const HandleNodePool = (props: IDialog) => { return ( setVisible(v)}> - {isUpdate ? 'Add nodepool' : 'Edit nodepool'} + {isUpdate ? 'Edit nodepool' : 'Add nodepool'} {(!isUpdate || (isUpdate && props.data)) && } ); diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx index e54a84ae6..974a49541 100644 --- a/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx +++ b/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx @@ -1,10 +1,4 @@ -import { - CodeSimple, - PencilLine, - Trash, - Cpu, - ChevronDown, -} from '@jengaicons/react'; +import { PencilLine, Trash, Cpu } from '@jengaicons/react'; import { generateKey, titleCase } from '~/components/utils'; import ConsoleAvatar from '~/console/components/console-avatar'; import { @@ -32,10 +26,10 @@ import { toast } from '~/components/molecule/toast'; import { useReload } from '~/root/lib/client/helpers/reloader'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { Link } from '@remix-run/react'; -import { listRender } from '~/console/components/commons'; +import { IStatus, listRender } from '~/console/components/commons'; import AnimateHide from '~/components/atoms/animate-hide'; import HandleNodePool from './handle-nodepool'; -import { findNodePlan, findNodePlanWithCategory } from './nodepool-utils'; +import { findNodePlanWithCategory } from './nodepool-utils'; const RESOURCE_NAME = 'nodepool'; type BaseType = ExtractNodeType; @@ -54,9 +48,11 @@ const parseItem = (item: BaseType) => { const ExtraButton = ({ onDelete, onEdit, + status: _, }: { onDelete: () => void; onEdit: () => void; + status: IStatus; }) => { return ( { const { item, open, onDelete, onEdit } = props; const { name, id } = parseItem(item); - const { minCount, maxCount, targetCount, cloudProvider, aws } = item.spec; + const { minCount, maxCount, cloudProvider, aws } = item.spec; const keyPrefix = `${RESOURCE_NAME}-${id}`; const lR = listRender({ keyPrefix, resource: item }); @@ -157,6 +153,9 @@ const ListDetail = ( return null; } }; + + const statusRender = lR.statusRender({ className: 'w-[180px]' }); + return (
@@ -175,7 +174,7 @@ const ListDetail = (
- {lR.statusRender({ className: 'w-[180px]' }).render()} + {statusRender.render()}
{/*
@@ -199,6 +198,7 @@ const ListDetail = ( onDelete(item)} onEdit={() => onEdit(item)} + status={statusRender.status} />
diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx index 48ec8d731..be9deca34 100644 --- a/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx +++ b/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx @@ -12,8 +12,6 @@ import { } from '~/console/server/utils/auth-utils'; import { IRemixCtx } from '~/root/lib/types/common'; import fake from '~/root/fake-data-generator/fake'; -import { parseName } from '~/console/server/r-utils/common'; -import { SubHeaderTitle } from '~/console/components/commons'; import HandleNodePool from './handle-nodepool'; import Tools from './tools'; import NodepoolResources from './nodepool-resources'; @@ -39,12 +37,10 @@ export const loader = async (ctx: IRemixCtx) => { return defer({ promise }); }; -const ClusterDetail = () => { +const Nodepools = () => { const [visible, setVisible] = useState(false); const { promise } = useLoaderData(); - const { cluster, account } = useOutletContext(); - return ( <> { return null; } const { pageInfo, totalCount } = nodePoolData; + + console.log(nodepools); + return ( { ); }; -export default ClusterDetail; +export default Nodepools; diff --git a/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx b/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx index 35304b334..8710c546d 100644 --- a/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx +++ b/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/control-has-associated-label */ import { CopySimple } from '@jengaicons/react'; import { defer } from '@remix-run/node'; -import { useLoaderData, useOutletContext } from '@remix-run/react'; +import { useLoaderData, useNavigate, useOutletContext } from '@remix-run/react'; import { useEffect, useState } from 'react'; import { Button } from '~/components/atoms/button'; import { TextInput } from '~/components/atoms/input'; @@ -15,16 +15,12 @@ import { LoadingComp, pWrapper } from '~/console/components/loading-component'; import SubNavAction from '~/console/components/sub-nav-action'; import { awsRegions } from '~/console/dummy/consts'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { - ICluster, - IClusters, -} from '~/console/server/gql/queries/cluster-queries'; +import { ICluster } from '~/console/server/gql/queries/cluster-queries'; import { ConsoleApiType, GQLServerHandler, } from '~/console/server/gql/saved-queries'; import { - ExtractNodeType, ensureResource, parseName, parseNodes, @@ -95,6 +91,7 @@ const SettingGeneral = () => { const { setHasChanges, resetAndReload } = useUnsavedChanges(); const reload = useReload(); const api = useConsoleApi(); + const navigate = useNavigate(); const { copy } = useClipboard({ onSuccess() { @@ -277,6 +274,7 @@ const SettingGeneral = () => { reload(); toast.success(`Cluster deleted successfully`); setDeleteCluster(false); + navigate(`/${account}/clusters`); } catch (err) { handleError(err); } diff --git a/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx b/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx index 4ca039b52..78aa9e130 100644 --- a/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx +++ b/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx @@ -1,6 +1,6 @@ import { GearSix } from '@jengaicons/react'; import { Link, useParams } from '@remix-run/react'; -import { generateKey, titleCase } from '~/components/utils'; +import { cn, generateKey, titleCase } from '~/components/utils'; import { listRender } from '~/console/components/commons'; import ConsoleAvatar from '~/console/components/console-avatar'; import { @@ -87,6 +87,7 @@ const GridView = ({ items }: { items: ExtractNodeType[] }) => { {items.map((item, index) => { const { name, id, provider, updateInfo } = parseItem(item); const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`; + const lR = listRender({ keyPrefix, resource: item }); return ( [] }) => {
), }, + lR.statusRender({ className: '' }), { key: generateKey(keyPrefix, updateInfo.author), render: () => ( @@ -136,11 +138,23 @@ const ListView = ({ items }: { items: ExtractNodeType[] }) => { const { name, id, provider } = parseItem(item); const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`; const lR = listRender({ keyPrefix, resource: item }); + const statusRender = lR.statusRender({ + className: 'w-[180px] mr-[50px]', + }); + return ( [] }) => { /> ), }, - lR.statusRender({ className: 'w-[180px] mr-[50px]' }), + statusRender, { key: generateKey(keyPrefix, `${provider}`), className: 'w-[150px] text-start', diff --git a/src/apps/console/routes/_.$account.clusters._index/route.tsx b/src/apps/console/routes/_.$account.clusters._index/route.tsx index 86fb0dc24..aa1e43ccd 100644 --- a/src/apps/console/routes/_.$account.clusters._index/route.tsx +++ b/src/apps/console/routes/_.$account.clusters._index/route.tsx @@ -121,6 +121,7 @@ const Clusters = () => { > {({ clustersData, secretsCount }) => { const clusters = parseNodes(clustersData); + console.log(clusters); if (!clusters) { return null;