From d076aeb360ea495fc106f519e27d11fbf73af86a Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Wed, 20 Dec 2023 13:23:34 +0530 Subject: [PATCH 1/4] :art: Added logs, and improved debugging --- Taskfile.yaml | 15 ++++++------ .../helpers/execute-query-with-context.ts | 24 +++++++++++++++---- src/apps/auth/root.tsx | 2 ++ 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/Taskfile.yaml b/Taskfile.yaml index 8a433ada4..b0fb795b8 100644 --- a/Taskfile.yaml +++ b/Taskfile.yaml @@ -8,8 +8,9 @@ tasks: interactive: true cmds: - | - BASE_URL=dev.kloudlite.io + BASE_URL=devc.kloudlite.io COOKIE_DOMAIN=".kloudlite.io" + GATEWAY_URL="http://gateway.karthik-testing.svc.cluster.local" case {{.app}} in "auth") PORT=4000 @@ -38,7 +39,7 @@ tasks: ;; "vision") - URL_SUFFIX="-vision" + URL_SUFFIX="" ;; *) @@ -47,18 +48,18 @@ tasks: esac - REMIX_DEV_ORIGIN="https://{{.app}}$URL_SUFFIX.dev.kloudlite.io" + REMIX_DEV_ORIGIN="https://{{.app}}$URL_SUFFIX.devc.kloudlite.io" cp -r ./static/common/. ./public/ cp -r ./static/{{.app}}/. ./public/ case "{{.tscheck}}" in "no") - URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev + GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev ;; *) - URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev & pnpm typecheck + GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev & pnpm typecheck ;; esac @@ -121,12 +122,12 @@ tasks: case $(whoami) in "bikash") - BASE_URL=dev.kloudlite.io + BASE_URL=devc.kloudlite.io URL_SUFFIX=1 ;; "vision") - BASE_URL=dev.kloudlite.io + BASE_URL=devc.kloudlite.io URL_SUFFIX="-vision" ;; diff --git a/lib/server/helpers/execute-query-with-context.ts b/lib/server/helpers/execute-query-with-context.ts index 13366d9e0..40e9c6edc 100644 --- a/lib/server/helpers/execute-query-with-context.ts +++ b/lib/server/helpers/execute-query-with-context.ts @@ -79,11 +79,25 @@ export const ExecuteQueryWithContext = ( query: print(q), variables: variables || {}, }, + timeout: 5000, }); - let { data,errors } = resp.data; - if(errors){ - throw new Error(JSON.stringify(errors)) + let { data } = resp.data; + const { errors } = resp.data; + + if (errors) { + const e = errors as Error[]; + if (e.length === 1) { + throw errors[0]; + } + + throw new Error( + e.reduce((acc, curr) => { + return `${acc}\n\n1. ${curr.name ? `${curr.name}:` : ''}:${ + curr.message + }${curr.stack ? `\n${curr.stack}` : ''}`; + }, 'Errors:') + ); } if (data) { @@ -97,11 +111,13 @@ export const ExecuteQueryWithContext = ( } return { ...resp.data, data }; } catch (err) { - console.error('ErrorIn:', apiName, err); if ((err as AxiosError).response) { + console.error('ErrorIn:', apiName, (err as Error).name); return (err as AxiosError).response?.data; } + console.error('ErrorIn:', apiName, (err as Error).message); + return { errors: [ { diff --git a/src/apps/auth/root.tsx b/src/apps/auth/root.tsx index e4c66c7bb..0bfd12fd5 100644 --- a/src/apps/auth/root.tsx +++ b/src/apps/auth/root.tsx @@ -9,6 +9,8 @@ export const links = () => { return [...baseLinks(), { rel: 'stylesheet', href: authStylesUrl }]; }; +export { ErrorBoundary } from '~/lib/app-setup/root'; + const Layout = ({ children }: ChildrenProps) => { return ( // From e5257214eaaff2db5444c9a2c817f50fc64fe2a7 Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Wed, 20 Dec 2023 15:40:46 +0530 Subject: [PATCH 2/4] :art: Error handling improved --- lib/app-setup/root.tsx | 10 ++++++++-- lib/client/helpers/log.ts | 10 ++++------ lib/utils/common.tsx | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx index dc8ca64b2..ac6bd362b 100644 --- a/lib/app-setup/root.tsx +++ b/lib/app-setup/root.tsx @@ -29,6 +29,7 @@ import { TopBar } from '~/components/organisms/top-bar'; import styleZenerSelect from '@oshq/react-select/index.css'; import stylesUrl from '~/design-system/index.css'; import rcss from 'react-highlightjs-logs/dist/index.css'; +import { isDev } from '../client/helpers/log'; export const links = () => [ { rel: 'stylesheet', href: stylesUrl }, @@ -96,9 +97,14 @@ export function ErrorBoundary() { if (error instanceof Error) { return ( - + - {typeof error.stack === 'string' + {/* eslint-disable-next-line no-nested-ternary */} + {isDev + ? typeof error.stack === 'string' + ? error.stack + : JSON.stringify(error.stack, null, 2) + : typeof error.stack === 'string' ? error.stack : JSON.stringify(error.stack, null, 2)} diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts index c3bbdb7f9..e3cc635c7 100644 --- a/lib/client/helpers/log.ts +++ b/lib/client/helpers/log.ts @@ -56,7 +56,7 @@ const PostToHook = (message: string) => { return {}; }; -const isDev = getNodeEnv() === 'development'; +export const isDev = getNodeEnv() === 'development'; const logger = { time: isDev ? console.time : () => {}, @@ -98,11 +98,9 @@ const logger = { console.trace(args); } - // if (isDev && typeof window === 'undefined') { - // serverError(args); - // } - - serverError(args); + if (isDev && typeof window === 'undefined') { + serverError(args); + } }, }; diff --git a/lib/utils/common.tsx b/lib/utils/common.tsx index 96f5965d3..fb71ad287 100644 --- a/lib/utils/common.tsx +++ b/lib/utils/common.tsx @@ -3,8 +3,8 @@ import logger from '../client/helpers/log'; export const handleError = (e: unknown): void => { const err = e as Error; - logger.error(e); toast.error(err.message); + logger.error(e); }; export const parseError = (e: unknown): Error => { From ac3f283ad6a29fc87e34c680699763c8a093d825 Mon Sep 17 00:00:00 2001 From: Bikash Date: Wed, 20 Dec 2023 21:19:59 +0530 Subject: [PATCH 3/4] minor ui changes --- src/apps/console/components/commons.tsx | 9 +- .../handle-nodepool.tsx | 86 ++++++++++--------- .../nodepool-resources.tsx | 22 ++--- .../_.$account.$cluster.nodepools/route.tsx | 11 ++- .../route.tsx | 10 +-- .../cluster-resources.tsx | 22 ++++- .../_.$account.clusters._index/route.tsx | 1 + src/design-system/components/atoms/chips.tsx | 1 + .../components/branding/brand-logo.tsx | 46 ++++++++-- .../components/branding/prod-logo.tsx | 1 - .../components/branding/workspace-logo.tsx | 1 - src/design-system/tailwind-base.js | 2 + 12 files changed, 132 insertions(+), 80 deletions(-) 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; diff --git a/src/design-system/components/atoms/chips.tsx b/src/design-system/components/atoms/chips.tsx index 66f449e78..c7067a671 100644 --- a/src/design-system/components/atoms/chips.tsx +++ b/src/design-system/components/atoms/chips.tsx @@ -129,6 +129,7 @@ const ChipBase = React.forwardRef( {compType === 'REMOVABLE' && (
- hello + {/* hello */}
); };