Skip to content

Commit

Permalink
devx related ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
nxtCoder19 committed Oct 4, 2024
2 parents 73ed23d + c3714a2 commit 8389fcc
Show file tree
Hide file tree
Showing 25 changed files with 342 additions and 368 deletions.
6 changes: 3 additions & 3 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
FROM node:20.8.1-alpine as remix
FROM node:20.8.1-alpine AS remix
WORKDIR /app
COPY ./package-production.json ./package.json
RUN npm i --frozen-lockfile

FROM node:20.8.1-alpine as install
FROM node:20.8.1-alpine AS install
RUN npm i -g pnpm
WORKDIR /app
COPY ./package.json ./package.json
Expand All @@ -19,7 +19,7 @@ COPY ./src/generated/plugin/package.json ./src/generated/plugin/pnpm-lock.yaml

RUN pnpm i -p --frozen-lockfile

FROM node:20.8.1-alpine as build
FROM node:20.8.1-alpine AS build
RUN npm i -g pnpm
WORKDIR /app
ARG APP
Expand Down
20 changes: 12 additions & 8 deletions src/apps/console/components/alert-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface IAlertModal {
title: ReactNode;
okText?: string;
okDisabled?: boolean;
showOkButton?: boolean;
cancelText?: string;
variant?: ButtonVariants;
footer?: boolean;
Expand All @@ -28,6 +29,7 @@ const AlertModal = ({
title,
okDisabled = false,
okText = 'Delete',
showOkButton = true,
cancelText = 'Cancel',
variant = 'critical',
}: IAlertModal) => {
Expand Down Expand Up @@ -55,14 +57,16 @@ const AlertModal = ({
{footer && (
<AlertDialog.Footer>
<AlertDialog.Button variant="basic" content={cancelText} closable />
<AlertDialog.Button
type="submit"
disabled={okDisabled}
variant={variant}
content={okText}
closable={false}
loading={isLoading}
/>
{showOkButton && (
<AlertDialog.Button
type="submit"
disabled={okDisabled}
variant={variant}
content={okText}
closable={false}
loading={isLoading}
/>
)}
</AlertDialog.Footer>
)}
</form>
Expand Down
109 changes: 0 additions & 109 deletions src/apps/console/hooks/use-cluster-status-v2.tsx

This file was deleted.

109 changes: 61 additions & 48 deletions src/apps/console/hooks/use-cluster-status-v3.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useOutletContext, useParams } from '@remix-run/react';
import {
createContext,
useCallback,
Expand All @@ -7,29 +8,35 @@ import {
useState,
} from 'react';
import { ChildrenProps } from '~/components/types';
import useDebounce from '~/root/lib/client/hooks/use-debounce';
import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch';
import { useParams } from '@remix-run/react';
import useDebounce from '~/root/lib/client/hooks/use-debounce';
import { IAccountContext } from '../routes/_main+/$account+/_layout';
import { useConsoleApi } from '../server/gql/api-provider';

const ctx = createContext<{
clusters: {
[key: string]: string;
};
setClusters: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
// clusters: {
// [key: string]: string;
// };
// setClusters: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
addToWatchList: (clusterNames: string[]) => void;
removeFromWatchList: (clusterNames: string[]) => void;
}>({
clusters: {},
setClusters: () => {},
// clusters: {},
// setClusters: () => {},
addToWatchList: () => {},
removeFromWatchList: () => {},
});

const ClusterStatusProvider = ({ children }: ChildrenProps) => {
const [clusters, setClusters] = useState<{
[key: string]: string;
}>({});
const ClusterStatusProvider = ({
children,
clustersMap,
setClustersMap,
}: ChildrenProps & {
clustersMap: { [key: string]: string };
setClustersMap: React.Dispatch<
React.SetStateAction<{ [key: string]: string }>
>;
}) => {
const [watchList, setWatchList] = useState<{
[key: string]: number;
}>({});
Expand Down Expand Up @@ -57,47 +64,54 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => {

const caller = (wl: { [key: string]: number }) => {
const keys = Object.keys(wl);
// console.log('nayak', wl, keys, Object.entries(wl));
for (let i = 0; i < keys.length; i += 1) {
(async () => {
const w = keys[i];
try {
const { data: cluster } = await api.getClusterStatus({
name: w,
});
setClusters((s) => {
return {
...s,
[w]: cluster.lastOnlineAt,
};
});
} catch (e) {
console.log('error', e);
}
})();
}

(async () => {
try {
const { data: clustersStatus } = await api.listClusterStatus({
pagination: {
first: 100,
},
search: {
allClusters: {
exact: true,
matchType: 'exact',
},
text: {
array: keys,
matchType: 'array',
},
},
});

setClustersMap((s) => {
return {
...s,
...clustersStatus,
};
});
} catch (e) {
console.log('error', e);
}
})();
};

useEffect(() => {
const t2 = setTimeout(() => {
caller(watchList);
}, 1000);

const t = setInterval(() => {
caller(watchList);
}, 30 * 1000);

return () => {
clearTimeout(t2);
clearInterval(t);
};
}, [watchList]);

const { account } = useParams();

const topic = useCallback(() => {
return Object.keys(clusters).map((c) => `account:${account}.cluster:${c}`);
}, [clusters])();
return Object.keys(clustersMap).map(
(c) => `account:${account}.cluster:${c}`
);
}, [clustersMap])();

useSocketWatch(() => {
caller(watchList);
Expand Down Expand Up @@ -128,12 +142,10 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => {
<ctx.Provider
value={useMemo(
() => ({
clusters,
setClusters,
addToWatchList,
removeFromWatchList,
}),
[clusters, setClusters]
[]
)}
>
{children}
Expand All @@ -150,7 +162,8 @@ export const useClusterStatusV3 = ({
clusterName?: string;
clusterNames?: string[];
}) => {
const { clusters, addToWatchList, removeFromWatchList } = useContext(ctx);
const { clustersMap } = useOutletContext<IAccountContext>();
const { addToWatchList, removeFromWatchList: _ } = useContext(ctx);
useDebounce(
() => {
if (!clusterName && !clusterNames) {
Expand All @@ -164,18 +177,18 @@ export const useClusterStatusV3 = ({
}

return () => {
if (clusterName) {
removeFromWatchList([clusterName]);
} else if (clusterNames) {
removeFromWatchList(clusterNames);
}
// if (clusterName) {
// removeFromWatchList([clusterName]);
// } else if (clusterNames) {
// removeFromWatchList(clusterNames);
// }
};
},
100,
[clusterName, clusterNames]
);

return {
clusters,
clustersMap,
};
};
5 changes: 2 additions & 3 deletions src/apps/console/page-components/app/compute.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useEffect, useState } from 'react';
import { Button } from '~/components/atoms/button';
import { NumberInput } from '~/components/atoms/input';
import Select from '~/components/atoms/select';
import Slider from '~/components/atoms/slider';
Expand Down Expand Up @@ -257,7 +256,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
)}

<div className="flex flex-col gap-3xl pt-3xl">
<Button
{/* <Button
size="sm"
content={
<span className="truncate text-left">Advanced options</span>
Expand All @@ -267,7 +266,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
onClick={() => {
setAdvancedOptions(!advancedOptions);
}}
/>
/> */}

{/* {advancedOptions && (
<Select
Expand Down
Loading

0 comments on commit 8389fcc

Please sign in to comment.