Skip to content

Commit cd31eb8

Browse files
newfish-cmyknewfish-cmyk
authored
feat(web): add status bar (#1054)
* feat(web): add status bar
1 parent 7b14c5a commit cd31eb8

File tree

13 files changed

+135
-32
lines changed

13 files changed

+135
-32
lines changed

‎web/public/locales/en/translation.json

+3
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,9 @@
244244
"EveryHour": "per hour",
245245
"EveryFiveMinutes": "every five minutes"
246246
},
247+
"StatusBar": {
248+
"CurrentApplication": "Current App"
249+
},
247250
"NoData": "Currently no data",
248251
"SaveAndRestart": "save and restart",
249252
"DataEntry": {

‎web/public/locales/zh-CN/translation.json

+3
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,9 @@
244244
"EveryHour": "每小时",
245245
"EveryFiveMinutes": "每五分钟"
246246
},
247+
"StatusBar": {
248+
"CurrentApplication": "当前应用"
249+
},
247250
"NoData": "当前无数据",
248251
"SaveAndRestart": "保存并重启",
249252
"DataEntry": {

‎web/public/locales/zh/translation.json

+3
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,9 @@
244244
"EveryHour": "每小时",
245245
"EveryFiveMinutes": "每五分钟"
246246
},
247+
"StatusBar": {
248+
"CurrentApplication": "当前应用"
249+
},
247250
"NoData": "当前无数据",
248251
"SaveAndRestart": "保存并重启",
249252
"DataEntry": {

‎web/src/pages/app/database/PolicyListPanel/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/****************************
22
* cloud functions list sidebar
33
***************************/
4+
import { useTranslation } from "react-i18next";
45
import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
5-
import { t } from "i18next";
66

77
import ConfirmButton from "@/components/ConfirmButton";
88
import EmptyBox from "@/components/EmptyBox";
@@ -17,6 +17,7 @@ import AddPolicyModal from "../mods/AddPolicyModal";
1717
import { useDeletePolicyMutation, usePolicyListQuery } from "../service";
1818
import useDBMStore from "../store";
1919
export default function PolicyListPanel() {
20+
const { t } = useTranslation();
2021
const deletePolicyMutation = useDeletePolicyMutation();
2122
const store = useDBMStore((state) => state);
2223
const policyQuery = usePolicyListQuery((data) => {

‎web/src/pages/app/database/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { Col, Row } from "@/components/Grid";
88
import Panel from "@/components/Panel";
99
import Resize from "@/components/Resize";
1010

11+
import StatusBar from "../mods/StatusBar";
12+
1113
import CollectionDataList from "./CollectionDataList";
1214
import CollectionListPanel from "./CollectionListPanel";
1315
import PolicyDataList from "./PolicyDataList";
@@ -43,6 +45,7 @@ function DatabasePage() {
4345
</Panel>
4446
</Col>
4547
</Row>
48+
<StatusBar />
4649
</Content>
4750
);
4851
}

‎web/src/pages/app/functions/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import Content from "@/components/Content";
88
import { Col, Row } from "@/components/Grid";
99
import Resize from "@/components/Resize";
1010

11+
import StatusBar from "../mods/StatusBar";
12+
1113
import ConsolePanel from "./mods/ConsolePanel";
1214
import DebugPanel from "./mods/DebugPanel";
1315
import DependencePanel from "./mods/DependencePanel";
@@ -61,6 +63,7 @@ function FunctionPage() {
6163
<DebugPanel containerRef={containerRef} />
6264
</Col>
6365
</Row>
66+
<StatusBar />
6467
</Content>
6568
);
6669
}

‎web/src/pages/app/functions/mods/ConsolePanel/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { useTranslation } from "react-i18next";
12
import { Center, Spinner } from "@chakra-ui/react";
23
import { useQuery } from "@tanstack/react-query";
3-
import { t } from "i18next";
44

55
import CopyText from "@/components/CopyText";
66
import EmptyBox from "@/components/EmptyBox";
@@ -13,6 +13,7 @@ import { LogControllerGetLogs } from "@/apis/v1/apps";
1313

1414
function ConsolePanel() {
1515
const { currentRequestId } = useFunctionStore();
16+
const { t } = useTranslation();
1617

1718
const logControllerGetLogsQuery = useQuery(
1819
["LogControllerGetLogs", currentRequestId],

‎web/src/pages/app/functions/mods/DebugPanel/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useEffect, useState } from "react";
2+
import { useTranslation } from "react-i18next";
23
import {
34
Button,
45
Center,
@@ -14,7 +15,6 @@ import {
1415
} from "@chakra-ui/react";
1516
import axios from "axios";
1617
import clsx from "clsx";
17-
import { t } from "i18next";
1818
import { keyBy, mapValues } from "lodash";
1919

2020
import JSONViewer from "@/components/Editor/JSONViewer";
@@ -39,6 +39,7 @@ import useGlobalStore from "@/pages/globalStore";
3939
const HAS_BODY_PARAMS_METHODS: (TMethod | undefined)[] = ["POST", "PUT", "PATCH", "DELETE"];
4040

4141
export default function DebugPanel(props: { containerRef: any }) {
42+
const { t } = useTranslation();
4243
const { getFunctionUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
4344
(state) => state,
4445
);

‎web/src/pages/app/logs/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from "react";
22
import { useForm } from "react-hook-form";
3+
import { useTranslation } from "react-i18next";
34
import {
45
Button,
56
Center,
@@ -18,7 +19,6 @@ import {
1819
useDisclosure,
1920
} from "@chakra-ui/react";
2021
import { useQuery } from "@tanstack/react-query";
21-
import { t } from "i18next";
2222

2323
import Content from "@/components/Content";
2424
import CopyText from "@/components/CopyText";
@@ -29,6 +29,8 @@ import Panel from "@/components/Panel";
2929
import { formatDate } from "@/utils/format";
3030
import getPageInfo from "@/utils/getPageInfo";
3131

32+
import StatusBar from "../mods/StatusBar";
33+
3234
import { queryKeys } from "./service";
3335

3436
import styles from "./index.module.scss";
@@ -51,6 +53,7 @@ export default function LogsPage() {
5153
page: number;
5254
};
5355

56+
const { t } = useTranslation();
5457
const { handleSubmit, register, getValues } = useForm<FormData>({});
5558

5659
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -203,6 +206,7 @@ export default function LogsPage() {
203206
</ModalContent>
204207
</Modal>
205208
</Panel>
209+
<StatusBar />
206210
</Content>
207211
);
208212
}

‎web/src/pages/app/mods/SideBar/Icons.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Icon } from "@chakra-ui/react";
33

4-
function Icons(props: { type: "function" | "database" | "storage" | "logs" | "setting" }) {
4+
function Icons(props: { type: "function" | "database" | "storage" | "logs" | "setting" | "info" }) {
55
const { type } = props;
66
switch (type) {
77
case "function":
@@ -59,6 +59,22 @@ function Icons(props: { type: "function" | "database" | "storage" | "logs" | "se
5959
</Icon>
6060
);
6161

62+
case "info":
63+
return (
64+
<Icon
65+
width="14px"
66+
height="14px"
67+
viewBox="0 0 16 16"
68+
fill="none"
69+
xmlns="http://www.w3.org/2000/svg"
70+
>
71+
<path
72+
d="M7.00017 0.333374C5.68162 0.333374 4.39269 0.724367 3.29636 1.45691C2.20004 2.18945 1.34555 3.23064 0.840969 4.44882C0.336385 5.66699 0.204362 7.00744 0.461597 8.30064C0.718832 9.59385 1.35377 10.7817 2.28612 11.7141C3.21847 12.6464 4.40636 13.2814 5.69956 13.5386C6.99277 13.7958 8.33322 13.6638 9.55139 13.1592C10.7696 12.6547 11.8108 11.8002 12.5433 10.7038C13.2758 9.60751 13.6668 8.31858 13.6668 7.00004C13.6649 5.23253 12.9619 3.53796 11.7121 2.28814C10.4622 1.03832 8.76768 0.335315 7.00017 0.333374ZM7.00017 12.3334C5.94533 12.3334 4.91419 12.0206 4.03712 11.4345C3.16006 10.8485 2.47648 10.0156 2.07281 9.04102C1.66914 8.06648 1.56352 6.99412 1.76931 5.95956C1.9751 4.92499 2.48305 3.97468 3.22893 3.2288C3.97481 2.48292 4.92512 1.97497 5.95968 1.76919C6.99425 1.5634 8.06661 1.66902 9.04114 2.07268C10.0157 2.47635 10.8486 3.15994 11.4347 4.037C12.0207 4.91406 12.3335 5.94521 12.3335 7.00004C12.3317 8.41399 11.7693 9.76952 10.7695 10.7693C9.76964 11.7691 8.41411 12.3316 7.00017 12.3334ZM7.00017 6.66671C6.82336 6.66671 6.65379 6.73695 6.52876 6.86197C6.40374 6.98699 6.3335 7.15656 6.3335 7.33337V9.33337C6.3335 9.51018 6.40374 9.67975 6.52876 9.80478C6.65379 9.9298 6.82336 10 7.00017 10C7.17698 10 7.34655 9.9298 7.47157 9.80478C7.59659 9.67975 7.66683 9.51018 7.66683 9.33337V7.33337C7.66683 7.15656 7.59659 6.98699 7.47157 6.86197C7.34655 6.73695 7.17698 6.66671 7.00017 6.66671ZM7.00017 4.00004C6.83535 4.00004 6.67423 4.04891 6.53719 4.14048C6.40015 4.23205 6.29334 4.3622 6.23027 4.51447C6.16719 4.66674 6.15069 4.8343 6.18285 4.99595C6.215 5.1576 6.29437 5.30609 6.41091 5.42263C6.52745 5.53917 6.67594 5.61854 6.83759 5.65069C6.99924 5.68285 7.1668 5.66635 7.31907 5.60327C7.47134 5.5402 7.60149 5.43339 7.69306 5.29635C7.78463 5.15931 7.8335 4.99819 7.8335 4.83337C7.8335 4.61236 7.7457 4.4004 7.58942 4.24412C7.43314 4.08784 7.22118 4.00004 7.00017 4.00004Z"
73+
fill="#00A9A6"
74+
/>
75+
</Icon>
76+
);
77+
6278
default:
6379
break;
6480
}

‎web/src/pages/app/mods/StatusBar/index.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useTranslation } from "react-i18next";
2+
import { HStack } from "@chakra-ui/react";
3+
import clsx from "clsx";
4+
import dayjs from "dayjs";
5+
6+
import Panel from "@/components/Panel";
7+
import { formatDate } from "@/utils/format";
8+
9+
import Icons from "../SideBar/Icons";
10+
11+
import SysSetting from "@/pages/app/setting/SysSetting";
12+
import useGlobalStore from "@/pages/globalStore";
13+
import CreateAppModal from "@/pages/home/mods/CreateAppModal";
14+
import StatusBadge from "@/pages/home/mods/StatusBadge";
15+
16+
function StatusBar() {
17+
const { t } = useTranslation();
18+
const { currentApp } = useGlobalStore((state) => state);
19+
20+
return (
21+
<Panel className="!flex-row justify-between">
22+
<HStack px={3} py={2} spacing={4}>
23+
<div>
24+
{t("StatusBar.CurrentApplication")}: {currentApp?.name}
25+
</div>
26+
<SysSetting>
27+
<div className="cursor-pointer">
28+
<Icons type="info" />
29+
</div>
30+
</SysSetting>
31+
<StatusBadge statusConditions={currentApp?.phase} state={currentApp?.state} />
32+
</HStack>
33+
<HStack px={3} py={2} spacing={4}>
34+
<div>CPU: {`${currentApp?.bundle?.resource?.limitCPU! / 1000} ${t("Unit.CPU")}`}</div>
35+
<div>
36+
{t("Spec.RAM")}: {`${currentApp?.bundle?.resource.limitMemory} ${t("Unit.MB")}`}
37+
</div>
38+
<div
39+
className={clsx(
40+
"mt-1",
41+
dayjs().add(3, "day").isAfter(dayjs(currentApp?.subscription.expiredAt))
42+
? "text-red-500"
43+
: "",
44+
)}
45+
>
46+
{t("EndTime")}: {formatDate(currentApp?.subscription.expiredAt)}
47+
<CreateAppModal application={currentApp as any} type="renewal">
48+
<a className="ml-2 text-primary-500" href="/edit">
49+
{t("Renew")}
50+
</a>
51+
</CreateAppModal>
52+
</div>
53+
</HStack>
54+
</Panel>
55+
);
56+
}
57+
58+
export default StatusBar;

‎web/src/pages/app/setting/AppInfoList/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -135,13 +135,13 @@ const AppEnvList = () => {
135135
title={t("SettingPanel.Subscription")}
136136
leftData={[
137137
{
138-
key: "创建时间",
138+
key: t("CreateTime"),
139139
value: `${formatDate(currentApp?.subscription?.createdAt)}`,
140140
},
141141
]}
142142
rightData={[
143143
{
144-
key: "到期时间",
144+
key: t("EndTime"),
145145
value: `${formatDate(currentApp?.subscription?.expiredAt)}`,
146146
},
147147
]}

‎web/src/pages/app/storages/index.tsx

+32-25
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
* cloud functions storage page
33
***************************/
44
import { useRef } from "react";
5-
import { t } from "i18next";
5+
import { useTranslation } from "react-i18next";
66

7+
import Content from "@/components/Content";
78
import EmptyBox from "@/components/EmptyBox";
89
import { Col, Row } from "@/components/Grid";
910
import Panel from "@/components/Panel";
1011
import Resize from "@/components/Resize";
1112

13+
import StatusBar from "../mods/StatusBar";
14+
1215
import CreateBucketModal from "./mods/CreateBucketModal";
1316
import FileList from "./mods/FileList";
1417
import StorageListPanel from "./mods/StorageListPanel";
@@ -17,33 +20,37 @@ import useStorageStore from "./store";
1720

1821
import useCustomSettingStore from "@/pages/customSetting";
1922
export default function StoragePage() {
23+
const { t } = useTranslation();
2024
const containerRef = useRef<HTMLDivElement>(null);
2125
const settingStore = useCustomSettingStore();
2226
const { currentStorage } = useStorageStore();
2327
return (
24-
<Row ref={containerRef}>
25-
<Col {...settingStore.layoutInfo.storagePage.SideBar}>
26-
<StorageListPanel />
27-
</Col>
28-
<Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
29-
<Col>
30-
{currentStorage === undefined ? (
31-
<Panel className="h-full items-center">
32-
<EmptyBox>
33-
<div>
34-
{t("StoragePanel.EmptyText")}
35-
<CreateBucketModal>
36-
<span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
37-
{t("CreateNow")}
38-
</span>
39-
</CreateBucketModal>
40-
</div>
41-
</EmptyBox>
42-
</Panel>
43-
) : (
44-
<FileList />
45-
)}
46-
</Col>
47-
</Row>
28+
<Content>
29+
<Row ref={containerRef}>
30+
<Col {...settingStore.layoutInfo.storagePage.SideBar}>
31+
<StorageListPanel />
32+
</Col>
33+
<Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
34+
<Col>
35+
{currentStorage === undefined ? (
36+
<Panel className="h-full items-center">
37+
<EmptyBox>
38+
<div>
39+
{t("StoragePanel.EmptyText")}
40+
<CreateBucketModal>
41+
<span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
42+
{t("CreateNow")}
43+
</span>
44+
</CreateBucketModal>
45+
</div>
46+
</EmptyBox>
47+
</Panel>
48+
) : (
49+
<FileList />
50+
)}
51+
</Col>
52+
</Row>
53+
<StatusBar />
54+
</Content>
4855
);
4956
}

0 commit comments

Comments
 (0)