feat(web): add status bar (#1054)

* feat(web): add status bar
labring · Apr 24, 2023 · cd31eb8 · cd31eb8
1 parent 7b14c5a
commit cd31eb8
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 32 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -244,6 +244,9 @@
     "EveryHour": "per hour",
     "EveryFiveMinutes": "every five minutes"
   },
+  "StatusBar": {
+    "CurrentApplication": "Current App"
+  },
   "NoData": "Currently no data",
   "SaveAndRestart": "save and restart",
   "DataEntry": {

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -244,6 +244,9 @@
     "EveryHour": "每小时",
     "EveryFiveMinutes": "每五分钟"
   },
+  "StatusBar": {
+    "CurrentApplication": "当前应用"
+  },
   "NoData": "当前无数据",
   "SaveAndRestart": "保存并重启",
   "DataEntry": {

diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -244,6 +244,9 @@
     "EveryHour": "每小时",
     "EveryFiveMinutes": "每五分钟"
   },
+  "StatusBar": {
+    "CurrentApplication": "当前应用"
+  },
   "NoData": "当前无数据",
   "SaveAndRestart": "保存并重启",
   "DataEntry": {

diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -1,8 +1,8 @@
 /****************************
  * cloud functions list sidebar
  ***************************/
+import { useTranslation } from "react-i18next";
 import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
-import { t } from "i18next";
 
 import ConfirmButton from "@/components/ConfirmButton";
 import EmptyBox from "@/components/EmptyBox";
@@ -17,6 +17,7 @@ import AddPolicyModal from "../mods/AddPolicyModal";
 import { useDeletePolicyMutation, usePolicyListQuery } from "../service";
 import useDBMStore from "../store";
 export default function PolicyListPanel() {
+  const { t } = useTranslation();
   const deletePolicyMutation = useDeletePolicyMutation();
   const store = useDBMStore((state) => state);
   const policyQuery = usePolicyListQuery((data) => {

diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
@@ -8,6 +8,8 @@ import { Col, Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
 import Resize from "@/components/Resize";
 
+import StatusBar from "../mods/StatusBar";
+
 import CollectionDataList from "./CollectionDataList";
 import CollectionListPanel from "./CollectionListPanel";
 import PolicyDataList from "./PolicyDataList";
@@ -43,6 +45,7 @@ function DatabasePage() {
           </Panel>
         </Col>
       </Row>
+      <StatusBar />
     </Content>
   );
 }

diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -8,6 +8,8 @@ import Content from "@/components/Content";
 import { Col, Row } from "@/components/Grid";
 import Resize from "@/components/Resize";
 
+import StatusBar from "../mods/StatusBar";
+
 import ConsolePanel from "./mods/ConsolePanel";
 import DebugPanel from "./mods/DebugPanel";
 import DependencePanel from "./mods/DependencePanel";
@@ -61,6 +63,7 @@ function FunctionPage() {
           <DebugPanel containerRef={containerRef} />
         </Col>
       </Row>
+      <StatusBar />
     </Content>
   );
 }

diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
@@ -1,6 +1,6 @@
+import { useTranslation } from "react-i18next";
 import { Center, Spinner } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
-import { t } from "i18next";
 
 import CopyText from "@/components/CopyText";
 import EmptyBox from "@/components/EmptyBox";
@@ -13,6 +13,7 @@ import { LogControllerGetLogs } from "@/apis/v1/apps";
 
 function ConsolePanel() {
   const { currentRequestId } = useFunctionStore();
+  const { t } = useTranslation();
 
   const logControllerGetLogsQuery = useQuery(
     ["LogControllerGetLogs", currentRequestId],

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Button,
   Center,
@@ -14,7 +15,6 @@ import {
 } from "@chakra-ui/react";
 import axios from "axios";
 import clsx from "clsx";
-import { t } from "i18next";
 import { keyBy, mapValues } from "lodash";
 
 import JSONViewer from "@/components/Editor/JSONViewer";
@@ -39,6 +39,7 @@ import useGlobalStore from "@/pages/globalStore";
 const HAS_BODY_PARAMS_METHODS: (TMethod | undefined)[] = ["POST", "PUT", "PATCH", "DELETE"];
 
 export default function DebugPanel(props: { containerRef: any }) {
+  const { t } = useTranslation();
   const { getFunctionUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
     (state) => state,
   );

diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import {
   Button,
   Center,
@@ -18,7 +19,6 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
-import { t } from "i18next";
 
 import Content from "@/components/Content";
 import CopyText from "@/components/CopyText";
@@ -29,6 +29,8 @@ import Panel from "@/components/Panel";
 import { formatDate } from "@/utils/format";
 import getPageInfo from "@/utils/getPageInfo";
 
+import StatusBar from "../mods/StatusBar";
+
 import { queryKeys } from "./service";
 
 import styles from "./index.module.scss";
@@ -51,6 +53,7 @@ export default function LogsPage() {
     page: number;
   };
 
+  const { t } = useTranslation();
   const { handleSubmit, register, getValues } = useForm<FormData>({});
 
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -203,6 +206,7 @@ export default function LogsPage() {
           </ModalContent>
         </Modal>
       </Panel>
+      <StatusBar />
     </Content>
   );
 }
diff --git a/web/src/pages/app/mods/SideBar/Icons.tsx b/web/src/pages/app/mods/SideBar/Icons.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "@chakra-ui/react";
 
-function Icons(props: { type: "function" | "database" | "storage" | "logs" | "setting" }) {
+function Icons(props: { type: "function" | "database" | "storage" | "logs" | "setting" | "info" }) {
   const { type } = props;
   switch (type) {
     case "function":
@@ -59,6 +59,22 @@ function Icons(props: { type: "function" | "database" | "storage" | "logs" | "se
         </Icon>
       );
 
+    case "info":
+      return (
+        <Icon
+          width="14px"
+          height="14px"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            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"
+            fill="#00A9A6"
+          />
+        </Icon>
+      );
+
     default:
       break;
   }

diff --git a/web/src/pages/app/mods/StatusBar/index.tsx b/web/src/pages/app/mods/StatusBar/index.tsx
@@ -0,0 +1,58 @@
+import { useTranslation } from "react-i18next";
+import { HStack } from "@chakra-ui/react";
+import clsx from "clsx";
+import dayjs from "dayjs";
+
+import Panel from "@/components/Panel";
+import { formatDate } from "@/utils/format";
+
+import Icons from "../SideBar/Icons";
+
+import SysSetting from "@/pages/app/setting/SysSetting";
+import useGlobalStore from "@/pages/globalStore";
+import CreateAppModal from "@/pages/home/mods/CreateAppModal";
+import StatusBadge from "@/pages/home/mods/StatusBadge";
+
+function StatusBar() {
+  const { t } = useTranslation();
+  const { currentApp } = useGlobalStore((state) => state);
+
+  return (
+    <Panel className="!flex-row justify-between">
+      <HStack px={3} py={2} spacing={4}>
+        <div>
+          {t("StatusBar.CurrentApplication")}: {currentApp?.name}
+        </div>
+        <SysSetting>
+          <div className="cursor-pointer">
+            <Icons type="info" />
+          </div>
+        </SysSetting>
+        <StatusBadge statusConditions={currentApp?.phase} state={currentApp?.state} />
+      </HStack>
+      <HStack px={3} py={2} spacing={4}>
+        <div>CPU: {`${currentApp?.bundle?.resource?.limitCPU! / 1000} ${t("Unit.CPU")}`}</div>
+        <div>
+          {t("Spec.RAM")}: {`${currentApp?.bundle?.resource.limitMemory} ${t("Unit.MB")}`}
+        </div>
+        <div
+          className={clsx(
+            "mt-1",
+            dayjs().add(3, "day").isAfter(dayjs(currentApp?.subscription.expiredAt))
+              ? "text-red-500"
+              : "",
+          )}
+        >
+          {t("EndTime")}: {formatDate(currentApp?.subscription.expiredAt)}
+          <CreateAppModal application={currentApp as any} type="renewal">
+            <a className="ml-2 text-primary-500" href="/edit">
+              {t("Renew")}
+            </a>
+          </CreateAppModal>
+        </div>
+      </HStack>
+    </Panel>
+  );
+}
+
+export default StatusBar;
diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -135,13 +135,13 @@ const AppEnvList = () => {
             title={t("SettingPanel.Subscription")}
             leftData={[
               {
-                key: "创建时间",
+                key: t("CreateTime"),
                 value: `${formatDate(currentApp?.subscription?.createdAt)}`,
               },
             ]}
             rightData={[
               {
-                key: "到期时间",
+                key: t("EndTime"),
                 value: `${formatDate(currentApp?.subscription?.expiredAt)}`,
               },
             ]}

diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
@@ -2,13 +2,16 @@
  * cloud functions storage page
  ***************************/
 import { useRef } from "react";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
+import Content from "@/components/Content";
 import EmptyBox from "@/components/EmptyBox";
 import { Col, Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
 import Resize from "@/components/Resize";
 
+import StatusBar from "../mods/StatusBar";
+
 import CreateBucketModal from "./mods/CreateBucketModal";
 import FileList from "./mods/FileList";
 import StorageListPanel from "./mods/StorageListPanel";
@@ -17,33 +20,37 @@ import useStorageStore from "./store";
 
 import useCustomSettingStore from "@/pages/customSetting";
 export default function StoragePage() {
+  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const settingStore = useCustomSettingStore();
   const { currentStorage } = useStorageStore();
   return (
-    <Row ref={containerRef}>
-      <Col {...settingStore.layoutInfo.storagePage.SideBar}>
-        <StorageListPanel />
-      </Col>
-      <Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
-      <Col>
-        {currentStorage === undefined ? (
-          <Panel className="h-full items-center">
-            <EmptyBox>
-              <div>
-                {t("StoragePanel.EmptyText")}
-                <CreateBucketModal>
-                  <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
-                    {t("CreateNow")}
-                  </span>
-                </CreateBucketModal>
-              </div>
-            </EmptyBox>
-          </Panel>
-        ) : (
-          <FileList />
-        )}
-      </Col>
-    </Row>
+    <Content>
+      <Row ref={containerRef}>
+        <Col {...settingStore.layoutInfo.storagePage.SideBar}>
+          <StorageListPanel />
+        </Col>
+        <Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
+        <Col>
+          {currentStorage === undefined ? (
+            <Panel className="h-full items-center">
+              <EmptyBox>
+                <div>
+                  {t("StoragePanel.EmptyText")}
+                  <CreateBucketModal>
+                    <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
+                      {t("CreateNow")}
+                    </span>
+                  </CreateBucketModal>
+                </div>
+              </EmptyBox>
+            </Panel>
+          ) : (
+            <FileList />
+          )}
+        </Col>
+      </Row>
+      <StatusBar />
+    </Content>
   );
 }