Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release v1.0.3 #134

Merged
merged 2 commits into from
Mar 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions lib/client/helpers/socket/useWatch.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useCallback, useEffect } from 'react';
import { useCallback } from 'react';
import { ISocketResp, useSubscribe } from './context';
import { useReload } from '../reloader';
import useDebounce from '../../hooks/use-debounce';

export const useSocketWatch = (
onUpdate: (v: ISocketResp<any>[]) => void,
Expand All @@ -27,11 +28,15 @@ export const useSocketWatch = (
[]
);

useEffect(() => {
if (subscribed) {
onUpdate(responses);
}
}, [responses]);
useDebounce(
() => {
if (subscribed) {
onUpdate(responses);
}
},
1000,
[responses]
);
};

export const useWatchReload = (topic: string | string[]) => {
Expand Down
2 changes: 1 addition & 1 deletion lib/client/hooks/use-log.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import { useEffect } from 'react';

export const useLog = (data: any) => {
useEffect(() => {
console.trace(data);
console.log(data);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code_refinement): Changing from console.trace to console.log reduces the verbosity of the logging, making it cleaner for debugging purposes. However, ensure that this change aligns with the debugging needs. console.trace can be useful for tracking call stacks, especially in complex applications.

Suggested change
console.log(data);
console.log('Data logged:', data);

}, [data]);
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ import { useMapper } from '~/components/utils';
import { registryHost } from '~/lib/configs/base-url.cjs';
import { BottomNavigation } from '~/console/components/commons';
import { useOutletContext } from '@remix-run/react';
import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout';
import { useLog } from '~/root/lib/client/hooks/use-log';
import { plans } from './datas';
import { IProjectContext } from '../../_layout';

const valueRender = ({
label,
Expand Down Expand Up @@ -49,7 +50,7 @@ const AppCompute = () => {
getImageTag,
} = useAppState();
const api = useConsoleApi();
const { cluster } = useOutletContext<IAppContext>();
const { cluster } = useOutletContext<IProjectContext>();

const {
data,
Expand All @@ -64,9 +65,19 @@ const AppCompute = () => {
isLoading: nodepoolLoading,
error: nodepoolLoadingError,
} = useCustomSwr('/nodepools', async () => {
return api.listNodePools({ clusterName: parseName(cluster) });
return api.listNodePools({
clusterName: parseName(cluster),
pagination: {
first: 100,
orderBy: 'updateTime',
sortDirection: 'DESC',
},
});
Comment on lines +68 to +75
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Adding pagination with a 'first' limit of 100 and sorting by 'updateTime' DESC is a good practice for handling potentially large datasets. This ensures the UI remains responsive and the data presented is the most relevant. However, consider if 100 is the optimal number based on the average use case and UI design.

Suggested change
return api.listNodePools({
clusterName: parseName(cluster),
pagination: {
first: 100,
orderBy: 'updateTime',
sortDirection: 'DESC',
},
});
return api.listNodePools({
clusterName: parseName(cluster),
pagination: {
first: 100, // Consider adjusting this value based on UI design and average use case. Lower if UI gets sluggish or if less data is typically needed.
orderBy: 'updateTime',
sortDirection: 'DESC',
},
});

});

useLog(nodepoolData);
useLog(nodepoolLoadingError);

const { values, errors, handleChange, isLoading, submit } = useForm({
initialValues: {
imageUrl: app.spec.containers[activeContIndex]?.image || '',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import {
} from '~/console/server/utils/auth-utils';
import { IRemixCtx } from '~/root/lib/types/common';
import { getPagination, getSearch } from '~/console/server/utils/common';
import fake from '~/root/fake-data-generator/fake';
import HandleNodePool from './handle-nodepool';
import Tools from './tools';
import NodepoolResources from './nodepool-resources';
import fake from "~/root/fake-data-generator/fake";

export const loader = async (ctx: IRemixCtx) => {
ensureAccountSet(ctx);
Expand Down Expand Up @@ -49,7 +49,8 @@ const Nodepools = () => {
<LoadingComp
data={promise}
skeletonData={{
nodePoolData: fake.ConsoleListNodePoolsQuery.infra_listNodePools as any,
nodePoolData: fake.ConsoleListNodePoolsQuery
.infra_listNodePools as any,
}}
>
{({ nodePoolData }) => {
Expand Down
Loading