From 03c8bb597cc4b00193a6079b4e89e1fadde597f9 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Mon, 30 Sep 2024 14:23:00 +0530 Subject: [PATCH 1/3] add template mode for environment creation --- Taskfile.yaml | 13 +- lib/app-setup/root.tsx | 10 +- .../components/console-list-components.tsx | 16 +-- .../page-components/handle-environment.tsx | 79 ++++++++---- src/apps/console/routes/_a+/new-team.tsx | 51 ++++---- .../environments/clone-environment.tsx | 55 ++++---- .../environments/environment-resources-v2.tsx | 30 +++-- .../_main+/$account+/environments/route.tsx | 122 +++++++++--------- .../$account+/new-managed-service/_index.tsx | 55 ++++---- src/apps/iot-console/routes/_a+/new-team.tsx | 26 ++-- src/design-system/components/atoms/radio.tsx | 17 ++- 11 files changed, 271 insertions(+), 203 deletions(-) diff --git a/Taskfile.yaml b/Taskfile.yaml index 7f1e20127..969f3fa70 100644 --- a/Taskfile.yaml +++ b/Taskfile.yaml @@ -217,5 +217,16 @@ tasks: vars: Image: ghcr.io/kloudlite/web/events:{{.tag}} cmds: - # - docker buildx build -t {{.Image}} --platform linux/amd64 -f Dockerfile.webinar --push . - docker buildx build . -t {{.Image}} --platform linux/amd64 -f Dockerfile.webinar --output=type=image,compression=zstd,force-compression=true,compression-level=12,push=true + + container-push-dashboard: + preconditions: + - sh: '[[ -n "{{.app}}" ]]' + msg: "var app must have a value" + - sh: '[[ -n "{{.tag}}" ]]' + msg: "var tag must have a value" + silent: true + vars: + IMAGE: ghcr.io/kloudlite/web/{{.app}}:{{.tag}} + cmds: + - docker buildx build --build-arg APP={{.app}} . -t {{.IMAGE}} --platform linux/amd64 --output=type=image,compression=zstd,force-compression=true,compression-level=12,push=true diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx index f959a4f38..9788facae 100644 --- a/lib/app-setup/root.tsx +++ b/lib/app-setup/root.tsx @@ -12,28 +12,28 @@ import { } from '@remix-run/react'; import rcSlide from 'rc-slider/assets/index.css'; import { ReactNode, useEffect } from 'react'; +import rcss from 'react-highlightjs-logs/dist/index.css'; import skeletonCSS from 'react-loading-skeleton/dist/skeleton.css'; import styleReactPulsable from 'react-pulsable/index.css'; import reactToast from 'react-toastify/dist/ReactToastify.css'; -import rcss from 'react-highlightjs-logs/dist/index.css'; +import { Button } from '~/components/atoms/button'; import Container from '~/components/atoms/container'; import ProgressContainer, { useProgress, } from '~/components/atoms/progress-bar'; import Tooltip from '~/components/atoms/tooltip'; +import { TooltipContainer } from '~/components/atoms/tooltipV2'; import { BrandLogo } from '~/components/branding/brand-logo'; import { ToastContainer } from '~/components/molecule/toast'; +import Page404 from '~/components/organisms/page-404'; import { TopBar } from '~/components/organisms/top-bar'; +import { ChildrenProps } from '~/components/types'; import stylesUrl from '~/design-system/index.css'; import tailwindBase from '~/design-system/tailwind-base.js'; import { ReloadIndicator } from '~/lib/client/components/reload-indicator'; import { isDev } from '~/lib/client/helpers/log'; -import { Button } from '~/components/atoms/button'; -import { ChildrenProps } from '~/components/types'; -import Page404 from '~/components/organisms/page-404'; import { getClientEnv, getServerEnv } from '~/root/lib/configs/base-url.cjs'; import { useDataFromMatches } from '../client/hooks/use-custom-matches'; -import { TooltipContainer } from '~/components/atoms/tooltipV2'; export const links: LinksFunction = () => [ { rel: 'stylesheet', href: stylesUrl }, diff --git a/src/apps/console/components/console-list-components.tsx b/src/apps/console/components/console-list-components.tsx index 79ca1a38d..b6cdbd598 100644 --- a/src/apps/console/components/console-list-components.tsx +++ b/src/apps/console/components/console-list-components.tsx @@ -157,7 +157,7 @@ const ListItemV2 = ({
{data} @@ -177,7 +177,7 @@ const ListItemV2 = ({
{data.length >= truncateLength ? ( @@ -341,12 +341,8 @@ const listClass = { item: 'w-[146px]', }; export { - ListBody, - ListItem, - ListTitle, - ListTitleV2, - ListItemV2, - ListSecondary, - listFlex, - listClass, + ListBody, listClass, listFlex, ListItem, ListItemV2, + ListSecondary, ListTitle, + ListTitleV2 }; + diff --git a/src/apps/console/page-components/handle-environment.tsx b/src/apps/console/page-components/handle-environment.tsx index 8023dc190..350f587fa 100644 --- a/src/apps/console/page-components/handle-environment.tsx +++ b/src/apps/console/page-components/handle-environment.tsx @@ -1,7 +1,10 @@ +/* eslint-disable no-nested-ternary */ import { useCallback, useEffect, useState } from 'react'; +import Radio from '~/components/atoms/radio'; import Select from '~/components/atoms/select'; import Popup from '~/components/molecule/popup'; import { toast } from '~/components/molecule/toast'; +import { cn } from '~/components/utils'; 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'; @@ -14,18 +17,28 @@ import { IEnvironment } from '../server/gql/queries/environment-queries'; import { parseName, parseNodes } from '../server/r-utils/common'; import { DIALOG_TYPE } from '../utils/commons'; -const ClusterSelectItem = ({ +export const ClusterSelectItem = ({ label, value, + disabled, }: { label: string; value: string; + disabled?: boolean; }) => { return ( -
+
-
{label}
-
{value}
+
+ {label} +
+
+ {value} +
); @@ -53,8 +66,13 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { label: c.displayName, value: parseName(c), ready: findClusterStatus(c), + disabled: !findClusterStatus(c), render: () => ( - + ), })); setClusterList(data); @@ -71,7 +89,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { Yup.object({ displayName: Yup.string().required(), name: Yup.string().required(), - clusterName: Yup.string().required(), + // clusterName: Yup.string().required(), }) ); @@ -88,6 +106,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { name: '', displayName: '', clusterName: '', + radioType: 'compute', environmentRoutingMode: false, isNameError: false, }, @@ -101,7 +120,8 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { metadata: { name: val.name, }, - clusterName: val.clusterName || '', + clusterName: + val.radioType === 'template' ? '' : val.clusterName || '', displayName: val.displayName, spec: { routing: { @@ -159,7 +179,9 @@ const HandleEnvironment = ({ show, setShow }: IDialog) => { > {show?.type === DIALOG_TYPE.ADD - ? `Create new environment` + ? values.radioType === 'compute' + ? `Create new environment` + : `Create new template` : `Edit environment`} ) => { isUpdate={show?.type !== DIALOG_TYPE.ADD} /> - clusterList} + onChange={({ value }) => { + handleChange('clusterName')(dummyEvent(value)); + }} + error={!!errors.clusterName} + message={errors.clusterName} + /> + )} {/* { const api = useConsoleApi(); const navigate = useNavigate(); const user = useDataFromMatches('user', {}); + const { a: accountName } = useParams(); + const { data: accountsData } = useCustomSwr('/list_accounts', async () => { return api.listAccounts({}); }); @@ -73,7 +75,8 @@ const NewAccount = () => { throw _errors[0]; } toast.success('account created'); - navigate(`/onboarding/${v.name}/attach-new-cluster`); + // navigate(`/onboarding/${v.name}/attach-new-cluster`); + navigate(`/${v.name}/environments`); } catch (err) { handleError(err); } @@ -109,11 +112,11 @@ const NewAccount = () => { {...(accountsData?.length === 0 ? {} : { - backButton: { - content: 'Back to teams', - to: `/teams`, - }, - })} + backButton: { + content: 'Back to teams', + to: `/teams`, + }, + })} > { { {/* */} {/* */} - + {/* + /> */} 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 9aea5a6c1..2a82309e7 100644 --- a/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx @@ -7,6 +7,7 @@ import CommonPopupHandle from '~/console/components/common-popup-handle'; import { NameIdView } from '~/console/components/name-id-view'; import { IDialogBase } from '~/console/components/types.d'; import { findClusterStatus } from '~/console/hooks/use-cluster-status'; +import { ClusterSelectItem } from '~/console/page-components/handle-environment'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IEnvironments } from '~/console/server/gql/queries/environment-queries'; import { @@ -21,22 +22,22 @@ import { handleError } from '~/root/lib/utils/common'; type IDialog = IDialogBase>; -const ClusterSelectItem = ({ - label, - value, -}: { - label: string; - value: string; -}) => { - return ( -
-
-
{label}
-
{value}
-
-
- ); -}; +// const ClusterSelectItem = ({ +// label, +// value, +// }: { +// label: string; +// value: string; +// }) => { +// return ( +//
+//
+//
{label}
+//
{value}
+//
+//
+// ); +// }; const Root = (props: IDialog) => { const { isUpdate, setVisible } = props; @@ -52,8 +53,13 @@ const Root = (props: IDialog) => { label: c.displayName, value: parseName(c), ready: findClusterStatus(c), + disabled: !findClusterStatus(c), render: () => ( - + ), })); setClusterList(data); @@ -150,13 +156,14 @@ const Root = (props: IDialog) => { size="lg" value={values.clusterName} placeholder="Select a Cluster" - options={async () => [ - ...((clusterList && - clusterList.filter((d) => { - return d.ready; - })) || - []), - ]} + options={async () => clusterList} + // options={async () => [ + // ...((clusterList && + // clusterList.filter((d) => { + // return d.ready; + // })) || + // []), + // ]} onChange={({ value }) => { handleChange('clusterName')(dummyEvent(value)); }} diff --git a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx index 0fe3a7882..9f9b2365b 100644 --- a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx @@ -1,5 +1,5 @@ import { Link, useOutletContext, useParams } from '@remix-run/react'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { Badge } from '~/components/atoms/badge'; import { toast } from '~/components/molecule/toast'; import { generateKey, titleCase } from '~/components/utils'; @@ -258,12 +258,21 @@ const ListView = ({ items, onAction }: IResource) => { ), }, cluster: { - render: () => ( - - ), + render: () => { + // if (i.clusterName === '') { + // return ; + // } + return ( + + ); + }, }, status: { render: () => { + if (i.clusterName === '') { + return TEMPLATE; + } + if (i.isArchived) { return Archived; } @@ -312,7 +321,7 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { useWatchReload( items.map((i) => { return `account:${parseName(account)}.environment:${parseName(i)}`; - }), + }) ); const suspendEnvironment = async (item: BaseType, suspend: boolean) => { @@ -334,11 +343,10 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { throw errors[0]; } toast.success( - `${ - suspend - ? 'Environment suspended successfully' - : 'Environment resumed successfully' - }`, + `${suspend + ? 'Environment suspended successfully' + : 'Environment resumed successfully' + }` ); reloadPage(); } catch (err) { @@ -347,7 +355,7 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { }; const [showDeleteDialog, setShowDeleteDialog] = useState( - null, + null ); const [visible, setVisible] = useState(null); diff --git a/src/apps/console/routes/_main+/$account+/environments/route.tsx b/src/apps/console/routes/_main+/$account+/environments/route.tsx index afecc7765..768c7a2e4 100644 --- a/src/apps/console/routes/_main+/$account+/environments/route.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/route.tsx @@ -1,5 +1,5 @@ import { defer } from '@remix-run/node'; -import { Link, useLoaderData, useParams } from '@remix-run/react'; +import { useLoaderData } from '@remix-run/react'; import { useState } from 'react'; import { Button } from '~/components/atoms/button.jsx'; import { Plus } from '~/console/components/icons'; @@ -30,16 +30,16 @@ export const loader = async (ctx: IRemixCtx) => { search: getSearch(ctx), }); - const { data: clusterData, errors: clusterErrors } = await GQLServerHandler( - ctx.request - ).listAllClusters({ - pagination: getPagination(ctx), - search: getSearch(ctx), - }); + // const { data: clusterData, errors: clusterErrors } = await GQLServerHandler( + // ctx.request + // ).listAllClusters({ + // pagination: getPagination(ctx), + // search: getSearch(ctx), + // }); - if (clusterErrors) { - throw clusterErrors[0]; - } + // if (clusterErrors) { + // throw clusterErrors[0]; + // } if (errors) { throw errors[0]; @@ -47,7 +47,7 @@ export const loader = async (ctx: IRemixCtx) => { return { environmentData: data || {}, - clusterList: clusterData || {}, + // clusterList: clusterData || {}, }; }); @@ -59,7 +59,7 @@ const Workspaces = () => { useState>(null); const { promise } = useLoaderData(); - const { account } = useParams(); + // const { account } = useParams(); return ( <> @@ -68,64 +68,62 @@ const Workspaces = () => { skeletonData={{ environmentData: fake.ConsoleListEnvironmentsQuery .core_listEnvironments as any, - clusterList: fake.ConsoleListAllClustersQuery.byok_clusters as any, }} > - {({ environmentData, clusterList }) => { + {({ environmentData }) => { const environments = parseNodes(environmentData); - const clusters = parseNodes(clusterList); if (!environments) { return null; } - if (clusters?.length === 0) { - return ( - , - is: environments?.length === 0, - title: 'This is where you’ll manage your environment.', - content: ( -

- You don't have any compute attached to your account. - Please attach a compute to your account to create an - environment. -
- Go to{' '} - - - Infrastructure - - {' '} - to attach your compute or local device. -

- /*