Skip to content

feat(web): optimize the state of app #1403

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.

Sign up for GitHub

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

Merged
merged 6 commits into from
Jul 18, 2023
Merged

feat(web): optimize the state of app #1403

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
91b5d7b
feat: add color for the delete IconText
Jul 12, 2023
260ff77
fix: fix the error color in light and dark mode
Jul 12, 2023
f59fc09
Merge branch 'labring:main' into main
imyuanx Jul 14, 2023
3d9672e
feat: optimize the state of app
Jul 14, 2023
4d8cd42
chore: update
Jul 17, 2023
36906d0
fix(web): fix app state display
newfish-cmyk Jul 17, 2023
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
1 change: 1 addition & 0 deletions web/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const Pages = {

export enum APP_STATUS {
// [ "Running", "Stopped", "Restarting", "Deleted" ]
Starting = "Starting",
Running = "Running",
Stopped = "Stopped",
Restarting = "Restarting",
Expand Down
22 changes: 21 additions & 1 deletion web/src/pages/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";

import { APP_PHASE_STATUS } from "@/constants";

import Empty from "./mods/Empty";
import List from "./mods/List";

import { TApplicationItem } from "@/apis/typing";
import { ApplicationControllerFindAll } from "@/apis/v1/applications";

export const APP_LIST_QUERY_KEY = ["appListQuery"];

function HomePage() {
const [shouldRefetch, setShouldRefetch] = useState(true);
const queryClient = useQueryClient();

useEffect(() => {
setTimeout(() => {
setShouldRefetch(true);
Expand Down Expand Up @@ -39,6 +42,22 @@ function HomePage() {
},
);

function updatePhase(appid: string, type: keyof typeof APP_PHASE_STATUS) {
const newappListQueryData = appListQuery.data?.data.map((item: TApplicationItem) => {
if (item.appid !== appid) return item;
return {
...item,
phase: type,
};
});
if (appListQuery.data && newappListQueryData) {
queryClient.setQueryData(APP_LIST_QUERY_KEY, {
...appListQuery.data,
data: newappListQueryData,
});
}
}

if (appListQuery.isLoading) {
return null;
}
Expand All @@ -49,6 +68,7 @@ function HomePage() {
<div className="mx-auto mt-10 flex w-11/12 flex-col lg:w-8/12">
<List
appListQuery={appListQuery}
updatePhase={updatePhase}
setShouldRefetch={() => {
setTimeout(() => {
setShouldRefetch(true);
Expand Down
11 changes: 9 additions & 2 deletions web/src/pages/home/mods/List/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@ import { TApplicationItem } from "@/apis/typing";
import { ApplicationControllerUpdateState } from "@/apis/v1/applications";
import useGlobalStore from "@/pages/globalStore";

function List(props: { appListQuery: any; setShouldRefetch: any }) {
function List(props: { appListQuery: any; setShouldRefetch: any; updatePhase: any }) {
const navigate = useNavigate();
const { t } = useTranslation();

const { setCurrentApp, regions } = useGlobalStore();

const [searchKey, setSearchKey] = useState("");

const { appListQuery, setShouldRefetch } = props;
const { appListQuery, setShouldRefetch, updatePhase } = props;
const bg = useColorModeValue("lafWhite.200", "lafDark.200");

const updateAppStateMutation = useMutation((params: any) =>
Expand Down Expand Up @@ -165,6 +165,12 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
display={"block"}
onClick={async (event) => {
event?.preventDefault();
updatePhase(
item.appid,
item.phase === APP_STATUS.Stopped
? APP_STATUS.Starting
: APP_STATUS.Restarting,
);
const res = await updateAppStateMutation.mutateAsync({
appid: item.appid,
state:
Expand All @@ -190,6 +196,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
display={"block"}
onClick={async (event: any) => {
event?.preventDefault();
updatePhase(item.appid, APP_PHASE_STATUS.Stopping);
await updateAppStateMutation.mutateAsync({
appid: item.appid,
state: APP_PHASE_STATUS.Stopped,
Expand Down