add template mode for environment creation

kloudlite · Sep 30, 2024 · 590ead2 · 590ead2
1 parent c730a01
commit 590ead2
Show file tree

Hide file tree

Showing 10 changed files with 258 additions and 199 deletions.
diff --git 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
@@ -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
@@ -157,7 +157,7 @@ const ListItemV2 = ({
               <div
                 className={cn(
                   'flex-1 bodyMd-medium text-text-strong pulsable',
-                  titleClass,
+                  titleClass
                 )}
               >
                 <Truncate length={truncateLength}>{data}</Truncate>
@@ -177,7 +177,7 @@ const ListItemV2 = ({
               <div
                 className={cn(
                   'flex-1 bodyMd-medium text-text-strong pulsable whitespace-normal',
-                  titleClass,
+                  titleClass
                 )}
               >
                 {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
@@ -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 (
-    <div>
+    <div className={cn({ 'cursor-default': !!disabled })}>
       <div className="flex flex-col">
-        <div>{label}</div>
-        <div className="bodySm text-text-soft">{value}</div>
+        <div className={disabled ? 'text-text-disabled' : 'text-text-default'}>
+          {label}
+        </div>
+        <div
+          className={cn('bodySm text-text-default', {
+            'text-text-disabled': !!disabled,
+          })}
+        >
+          {value}
+        </div>
       </div>
     </div>
   );
@@ -53,8 +66,13 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
         label: c.displayName,
         value: parseName(c),
         ready: findClusterStatus(c),
+        disabled: !findClusterStatus(c),
         render: () => (
-          <ClusterSelectItem label={c.displayName} value={parseName(c)} />
+          <ClusterSelectItem
+            label={c.displayName}
+            value={parseName(c)}
+            disabled={!findClusterStatus(c)}
+          />
         ),
       }));
       setClusterList(data);
@@ -71,7 +89,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
     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<IEnvironment | null>) => {
       name: '',
       displayName: '',
       clusterName: '',
+      radioType: 'compute',
       environmentRoutingMode: false,
       isNameError: false,
     },
@@ -101,7 +120,8 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               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<IEnvironment | null>) => {
     >
       <Popup.Header>
         {show?.type === DIALOG_TYPE.ADD
-          ? `Create new environment`
+          ? values.radioType === 'compute'
+            ? `Create new environment`
+            : `Create new template`
           : `Edit environment`}
       </Popup.Header>
       <Popup.Form
@@ -184,24 +206,31 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               isUpdate={show?.type !== DIALOG_TYPE.ADD}
             />
 
-            <Select
-              label="Select Cluster"
-              size="lg"
-              value={values.clusterName}
-              placeholder="Select a Cluster"
-              options={async () => [
-                ...((clusterList &&
-                  clusterList.filter((d) => {
-                    return d.ready;
-                  })) ||
-                  []),
-              ]}
-              onChange={({ value }) => {
-                handleChange('clusterName')(dummyEvent(value));
+            <Radio.Root
+              direction="horizontal"
+              value={values.radioType}
+              onChange={(value) => {
+                handleChange('radioType')(dummyEvent(value));
               }}
-              error={!!errors.clusterName}
-              message={errors.clusterName}
-            />
+            >
+              <Radio.Item value="compute">Use Compute</Radio.Item>
+              <Radio.Item value="template">Use Template</Radio.Item>
+            </Radio.Root>
+
+            {values.radioType === 'compute' && (
+              <Select
+                label="Select Compute"
+                size="lg"
+                value={values.clusterName}
+                placeholder="Select a Compute"
+                options={async () => clusterList}
+                onChange={({ value }) => {
+                  handleChange('clusterName')(dummyEvent(value));
+                }}
+                error={!!errors.clusterName}
+                message={errors.clusterName}
+              />
+            )}
 
             {/* <Checkbox */}
             {/*   label="Public" */}

diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
@@ -1,30 +1,32 @@
-import { useNavigate } from '@remix-run/react';
+import { useNavigate, useParams } from '@remix-run/react';
+import { Button } from '~/components/atoms/button';
+import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
-import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import { UserMe } from '~/root/lib/server/gql/saved-queries';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { NameIdView } from '~/console/components/name-id-view';
-import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import FillerCreateTeam from '~/console/assets/filler-create-team';
+import { BottomNavigation } from '~/console/components/commons';
+import { SignOut } from '~/console/components/icons';
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
-import { BottomNavigation } from '~/console/components/commons';
-import FillerCreateTeam from '~/console/assets/filler-create-team';
-import { SignOut } from '~/console/components/icons';
-import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import { NameIdView } from '~/console/components/name-id-view';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useExternalRedirect } from '~/root/lib/client/helpers/use-redirect';
-import { Button } from '~/components/atoms/button';
+import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import Select from '~/components/atoms/select';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
+import { UserMe } from '~/root/lib/server/gql/saved-queries';
+import Yup from '~/root/lib/server/helpers/yup';
+import { handleError } from '~/root/lib/utils/common';
 
 const NewAccount = () => {
   const api = useConsoleApi();
   const navigate = useNavigate();
   const user = useDataFromMatches<UserMe>('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`,
+            },
+          })}
       >
         <MultiStepProgress.Root
           currentStep={currentStep}
@@ -150,7 +153,7 @@ const NewAccount = () => {
               <BottomNavigation
                 primaryButton={{
                   variant: 'primary',
-                  content: 'Next',
+                  content: 'Create',
                   loading: isLoading,
                   type: 'submit',
                 }}
@@ -160,11 +163,11 @@ const NewAccount = () => {
           {/* <MultiStepProgress.Step step={2} label="Add your cloud provider" /> */}
           {/* <MultiStepProgress.Step step={3} label="Validate cloud provider" />
           <MultiStepProgress.Step step={4} label="Setup first cluster" /> */}
-          <MultiStepProgress.Step step={2} label="Attach Kubernetes Cluster" />
+          {/* <MultiStepProgress.Step step={2} label="Attach Kubernetes Cluster" />
           <MultiStepProgress.Step
             step={3}
             label="Verify Your Attached Kubernetes Cluster"
-          />
+          /> */}
         </MultiStepProgress.Root>
       </MultiStepProgressWrapper>
     </form>