From a2dbc87f4f648df5231a95cb12787dd64d129786 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Fri, 15 Mar 2024 13:02:28 +0530 Subject: [PATCH] fix(router/app): - add link for router - add advanced options for nodepool in create app - add nodepool select in app settings --- .../app+/$app+/settings+/compute/route.tsx | 49 ++- .../$environment+/new-app/app-compute.tsx | 49 ++- .../routers/router-resources-V2.tsx | 5 +- .../routers/router-resources.tsx | 354 ------------------ 4 files changed, 84 insertions(+), 373 deletions(-) delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx index 916ad061e..d35c4a736 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx @@ -13,9 +13,12 @@ import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes'; import { Button } from '~/components/atoms/button'; import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { parseNodes } from '~/console/server/r-utils/common'; +import { parseName, parseNodes } from '~/console/server/r-utils/common'; import { registryHost } from '~/lib/configs/base-url.cjs'; import { Checkbox } from '~/components/atoms/checkbox'; +import { useMapper } from '~/components/utils'; +import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout'; +import { useOutletContext } from '@remix-run/react'; import { plans } from '../../../../new-app/datas'; const valueRender = ({ @@ -50,6 +53,7 @@ const SettingCompute = () => { getImageTag, } = useAppState(); const { setPerformAction, hasChanges, loading } = useUnsavedChanges(); + const { cluster } = useOutletContext(); const api = useConsoleApi(); @@ -61,6 +65,21 @@ const SettingCompute = () => { return api.listRepo({}); }); + const { + data: nodepoolData, + isLoading: nodepoolLoading, + error: nodepoolLoadingError, + } = useCustomSwr('/nodepools', async () => { + return api.listNodePools({ + clusterName: parseName(cluster), + pagination: { + first: 100, + orderBy: 'updateTime', + sortDirection: 'DESC', + }, + }); + }); + const { values, errors, handleChange, submit, resetValues } = useForm({ initialValues: { imageUrl: getContainer(0)?.image || '', @@ -104,6 +123,8 @@ const SettingCompute = () => { app.spec.containers[activeContIndex].resourceMemory?.max, 0 ), + + nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '', }, validationSchema: Yup.object({ imageUrl: Yup.string().required(), @@ -125,6 +146,10 @@ const SettingCompute = () => { }, spec: { ...s.spec, + nodeSelector: { + ...(s.spec.nodeSelector || {}), + [keyconstants.nodepoolName]: val.nodepoolName, + }, containers: [ { ...(s.spec.containers?.[0] || {}), @@ -166,6 +191,11 @@ const SettingCompute = () => { const repos = getRepoMapper(data); + const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({ + label: val.metadata?.name || '', + value: val.metadata?.name || '', + })); + const { data: digestData, isLoading: digestLoading, @@ -265,6 +295,23 @@ const SettingCompute = () => { loading={digestLoading} /> + { - handleChange('nodepoolName')(dummyEvent(val.value)); - }} - options={async () => [...nodepools]} - error={!!errors.repos || !!nodepoolLoadingError} - message={ - nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app - } - loading={nodepoolLoading} - /> - { + handleChange('nodepoolName')(dummyEvent(val.value)); + }} + options={async () => [...nodepools]} + error={!!errors.repos || !!nodepoolLoadingError} + message={ + nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app + } + loading={nodepoolLoading} + /> + )} + { }; const ListView = ({ items, onAction }: IResource) => { + const { account, project, environment } = useParams(); return ( { }, ], rows: items.map((i) => { - const { name, updateInfo } = parseItem(i); + const { name, id, updateInfo } = parseItem(i); const firstDomain = i.spec.domains?.[0]; return { + to: `/${account}/${project}/${environment}/router/${id}/routes`, columns: { name: { render: () => , diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx deleted file mode 100644 index 458dd87f8..000000000 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx +++ /dev/null @@ -1,354 +0,0 @@ -import { Trash, PencilLine } from '@jengaicons/react'; -import { useState } from 'react'; -import { generateKey, titleCase } from '~/components/utils'; -import { - ListItem, - ListTitle, - listClass, - listFlex, -} from '~/console/components/console-list-components'; -import DeleteDialog from '~/console/components/delete-dialog'; -import Grid from '~/console/components/grid'; -import List from '~/console/components/list'; -import ListGridView from '~/console/components/list-grid-view'; -import ResourceExtraAction from '~/console/components/resource-extra-action'; -import { - ExtractNodeType, - parseName, - parseUpdateOrCreatedBy, - parseUpdateOrCreatedOn, -} from '~/console/server/r-utils/common'; -import { handleError } from '~/root/lib/utils/common'; -import { IRouters } from '~/console/server/gql/queries/router-queries'; -import { Link, useParams } from '@remix-run/react'; -import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { useReload } from '~/root/lib/client/helpers/reloader'; -import { toast } from '~/components/molecule/toast'; -import { Button } from '~/components/atoms/button'; -import Tooltip from '~/components/atoms/tooltip'; -import { useWatchReload } from '~/lib/client/helpers/socket/useWatch'; -import HandleRouter from './handle-router'; - -const RESOURCE_NAME = 'router'; -type BaseType = ExtractNodeType; - -const parseItem = (item: BaseType) => { - return { - name: item.displayName, - id: parseName(item), - updateInfo: { - author: `Updated by ${parseUpdateOrCreatedBy(item)}`, - time: parseUpdateOrCreatedOn(item), - }, - }; -}; - -type OnAction = ({ - action, - item, -}: { - action: 'edit' | 'delete' | 'detail'; - item: BaseType; -}) => void; - -type IExtraButton = { - onAction: OnAction; - item: BaseType; -}; - -const formatDomain = (domain: string) => { - const d = domain.startsWith('https://') ? domain : `https://${domain}`; - return { full: d, short: d.replace('https://', '') }; -}; - -const ExtraButton = ({ onAction, item }: IExtraButton) => { - return ( - , - type: 'item', - onClick: () => onAction({ action: 'edit', item }), - key: 'edit', - }, - { - label: 'Delete', - icon: , - type: 'item', - onClick: () => onAction({ action: 'delete', item }), - key: 'delete', - className: '!text-text-critical', - }, - ]} - /> - ); -}; - -interface IResource { - items: BaseType[]; - onAction: OnAction; -} - -const GridView = ({ items, onAction }: IResource) => { - const { account, project, environment } = useParams(); - return ( - - {items.map((item, index) => { - const { name, id, updateInfo } = parseItem(item); - const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`; - const firstDomain = item.spec.domains?.[0]; - return ( - ( - } - /> - ), - }, - { - key: generateKey(keyPrefix, 'extra_domain'), - render: () => ( - -