Ui fixes (#447)

* chore(mesh-wide): create dataTypeNameMapping fix #434 * chore(rx-page): add system information fix #436 * chore(meshwideupgrade): add info when no nodes * chore(meshwideupgrade): use tabs to show nodes * chore(mesh-wide): use darker link color
libremesh · Sep 4, 2024 · 03cdeaf · 03cdeaf
1 parent 1ad9768
commit 03cdeaf
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 36 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList.tsx
@@ -1,15 +1,35 @@
+import { Trans } from "@lingui/macro";
+
 import Loading from "components/loading";
 
 import NodeUpgradeInfoItem from "plugins/lime-plugin-mesh-wide-upgrade/src/components/nodeUpgradeInfo";
+import { UpgradeState } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeState";
 import { useMeshUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
+import { CenterFlex } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/divs";
 
 export const NodesList = () => {
     const { data, isLoading } = useMeshUpgrade();
 
-    if (isLoading || data === undefined) {
+    if (isLoading) {
         return <Loading />;
     }
 
+    if (!data || (data && Object.keys(data).length === 0)) {
+        return (
+            <CenterFlex>
+                <UpgradeState
+                    icon={null}
+                    title={
+                        <Trans>
+                            No nodes present on the <br />
+                            mesh wide upgrade state yet!
+                        </Trans>
+                    }
+                />
+            </CenterFlex>
+        );
+    }
+
     return (
         <>
             {data &&

diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx
@@ -4,6 +4,7 @@ import { useState } from "preact/hooks";
 import { StatusIcon } from "components/icons/status";
 import Loading from "components/loading";
 import Notification from "components/notifications/notification";
+import Tabs from "components/tabs";
 
 import NextStepFooter from "plugins/lime-plugin-mesh-wide-upgrade/src/components/nextStepFooter";
 import { ErrorState } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ErrorState";
@@ -23,7 +24,7 @@ const MeshWideUpgrade = () => {
         isError,
         error,
     } = useMeshUpgrade();
-    const [showNodeList, setShowNodeList] = useState(false);
+    const [showNodeList, setShowNodeList] = useState(0);
 
     if (isError) {
         return (
@@ -48,23 +49,28 @@ const MeshWideUpgrade = () => {
         );
     }
 
+    const tabs = [
+        {
+            key: 0,
+            repr: (
+                <div className={"flex"}>
+                    <Trans>Show state</Trans>
+                </div>
+            ),
+        },
+        {
+            key: 1,
+            repr: (
+                <div className={"flex"}>
+                    <Trans>Show nodes</Trans>
+                </div>
+            ),
+        },
+    ];
+
     return (
         <div className={"flex flex-col h-full w-full max-h-full"}>
-            <Notification
-                title={"Mesh wide upgrade"}
-                right={
-                    <div
-                        onClick={() => setShowNodeList(!showNodeList)}
-                        className={"cursor-pointer"}
-                    >
-                        {showNodeList ? (
-                            <Trans>Show state</Trans>
-                        ) : (
-                            <Trans>Show nodes</Trans>
-                        )}
-                    </div>
-                }
-            >
+            <Notification title={"Mesh wide upgrade"}>
                 <Trans>
                     Upgrade all network nodes at once. This proces will take a
                     while and will require user interaction.
@@ -80,9 +86,16 @@ const MeshWideUpgrade = () => {
                     <Trans>This node aborted successfully</Trans>
                 </div>
             )}
-            <div className={"flex-grow overflow-auto max-h-full w-full"}>
-                {showNodeList && <NodesList />}
-                {!showNodeList && <MeshWideUpgradeStatus />}
+            <div className={"flex-grow flex flex-col max-h-full w-full"}>
+                <Tabs
+                    tabs={tabs}
+                    current={showNodeList}
+                    onChange={setShowNodeList}
+                />
+                <div className="flex-grow overflow-auto">
+                    {showNodeList === 0 && <MeshWideUpgradeStatus />}
+                    {showNodeList === 1 && <NodesList />}
+                </div>
             </div>
             <NextStepFooter />
         </div>

diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
@@ -15,7 +15,10 @@ import {
 } from "plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks";
 import { useNodes } from "plugins/lime-plugin-mesh-wide/src/hooks/useNodes";
 import { MacToMacLink } from "plugins/lime-plugin-mesh-wide/src/lib/links/PointToPointLink";
-import { readableBytes } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
+import {
+    dataTypeNameMapping,
+    readableBytes,
+} from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { useSetLinkReferenceState } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
 import {
     BaseMacToMacLink,
@@ -315,13 +318,13 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
     let btnText = (
         <Trans>
             Set reference state for this
-            <br /> {reference.type} link
+            <br /> {dataTypeNameMapping(reference.type)}
         </Trans>
     );
     if (isDown) {
         btnText = (
             <Trans>
-                Delete this {reference.type} link
+                Delete this {dataTypeNameMapping(reference.type)}
                 <br />
                 from reference state
             </Trans>

diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/ShowErrorsDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/ShowErrorsDetail.tsx
@@ -1,6 +1,9 @@
 import { Trans } from "@lingui/macro";
 
+import { SharedStateDataTypeKeys } from "components/shared-state/SharedStateTypes";
+
 import { Row } from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/index";
+import { dataTypeNameMapping } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { ErrorsDetails } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 export const ShowErrorsDetail = ({ errors }: { errors: ErrorsDetails }) => {
@@ -45,7 +48,7 @@ export const ShowErrorsDetail = ({ errors }: { errors: ErrorsDetails }) => {
                             return (
                                 <div key={k} className={"flex flex-row gap-5"}>
                                     <div className={"text-2xl font-bold"}>
-                                        {dataType}
+                                        {dataTypeNameMapping(dataType)}
                                     </div>
                                     {nodes && (
                                         <Trans>
@@ -71,12 +74,19 @@ export const ShowErrorsDetail = ({ errors }: { errors: ErrorsDetails }) => {
                             Are they installed or properly initialized?
                         </Trans>
                     </Row>
-                    {[...errors.meshWideDataErrors].map((data, k) => (
-                        <div key={k}>
-                            {JSON.stringify(data.queryKey, null, 2)}:{" "}
-                            {data?.error?.toString()}
-                        </div>
-                    ))}
+                    {[...errors.meshWideDataErrors].map((data, k) => {
+                        const queryKey = JSON.stringify(
+                            data.queryKey,
+                            null,
+                            2
+                        ) as SharedStateDataTypeKeys;
+                        return (
+                            <div key={k}>
+                                {dataTypeNameMapping(queryKey)}:{" "}
+                                {data?.error?.toString()}
+                            </div>
+                        );
+                    })}
                 </div>
             )}
         </div>

diff --git a/plugins/lime-plugin-mesh-wide/src/components/Map/LinkLine.tsx b/plugins/lime-plugin-mesh-wide/src/components/Map/LinkLine.tsx
@@ -45,7 +45,7 @@ export const LinkLine = ({ referenceLink, actualLink }: ILinkLineProps) => {
 
     const getPathOpts = (isSelected) => {
         return {
-            color: hasError ? "#eb7575" : "#76bd7d",
+            color: hasError ? "#eb7575" : "#006a05",
             stroke: true,
             weight: isSelected ? 7 : 5,
             opacity: isSelected ? 1 : 0.8,

diff --git a/plugins/lime-plugin-mesh-wide/src/components/Map/style.less b/plugins/lime-plugin-mesh-wide/src/components/Map/style.less
@@ -1,4 +1,4 @@
-@good: #76bd7d;
+@good: #006a05;
 @warning: #eaab7e;
 @bad: #eb7575;
 

diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx b/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import { ModalActions, useModal } from "components/Modal/Modal";
 import InputField from "components/inputs/InputField";
 
+import { dataTypeNameMapping } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { MeshWideMapDataTypeKeys } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 const useActionModal = (
@@ -126,14 +127,19 @@ export const useSetLinkReferenceStateModal = () => {
         cb: () => Promise<void>
     ) => {
         let title = (
-            <Trans>Set reference state for this {dataType} link?</Trans>
+            <Trans>
+                Set reference state for this {dataTypeNameMapping(dataType)}?
+            </Trans>
         );
         let content = (
             <Trans>This will set the reference state of this link:</Trans>
         );
         if (isDown) {
             title = (
-                <Trans>Remove this {dataType} from the reference state</Trans>
+                <Trans>
+                    Remove this {dataTypeNameMapping(dataType)} from the
+                    reference state
+                </Trans>
             );
             content = (
                 <Trans>

diff --git a/plugins/lime-plugin-mesh-wide/src/lib/utils.ts b/plugins/lime-plugin-mesh-wide/src/lib/utils.ts
@@ -1,6 +1,8 @@
-import { INodes } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
+import { t } from "@lingui/macro";
+
+import { SharedStateDataTypeKeys } from "components/shared-state/SharedStateTypes";
 
-import { isEmpty } from "utils/utils";
+import { INodes } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 export const readableBytes = (bytes: number) => {
     const sizes = ["B", "KB", "MB", "GB", "TB"];
@@ -65,3 +67,22 @@ export const splitNodesByLocated = (nodeList: INodes): ISplitNodesByLocated => {
 
     return { locatedNodes, nonLocatedNodes };
 };
+
+export const dataTypeNameMapping = (dataType: SharedStateDataTypeKeys) => {
+    switch (dataType) {
+        case "node_info":
+            return t`Node Info`;
+        case "node_info_ref":
+            return t`Node Info Reference`;
+        case "wifi_links_info":
+            return t`Wifi Links`;
+        case "wifi_links_info_ref":
+            return t`Wifi Links Reference`;
+        case "bat_links_info":
+            return t`Batman Links`;
+        case "bat_links_info_ref":
+            return t`Batman Links Reference`;
+        default:
+            return dataType;
+    }
+};
diff --git a/plugins/lime-plugin-rx/src/icons/gearIcon.tsx b/plugins/lime-plugin-rx/src/icons/gearIcon.tsx
@@ -0,0 +1,7 @@
+import { IconProps, SvgIcon } from "components/icons/SvgIcon";
+
+export const GearIcon = ({ ...props }: IconProps) => (
+    <SvgIcon viewBox="0 0 512 512" {...props}>
+        <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+    </SvgIcon>
+);
diff --git a/plugins/lime-plugin-rx/src/rxPage.tsx b/plugins/lime-plugin-rx/src/rxPage.tsx
@@ -3,6 +3,7 @@ import { Fragment } from "preact";
 import { Footer } from "plugins/lime-plugin-rx/src/components/footer";
 import { Alignment } from "plugins/lime-plugin-rx/src/sections/alignment";
 import { InternetPath } from "plugins/lime-plugin-rx/src/sections/internetPath";
+import { System } from "plugins/lime-plugin-rx/src/sections/system";
 import { Wired } from "plugins/lime-plugin-rx/src/sections/wired";
 
 const Page = ({}) => {
@@ -16,6 +17,7 @@ const Page = ({}) => {
                 <InternetPath />
                 <Alignment />
                 <Wired />
+                <System />
                 <Footer />
             </div>
         </Fragment>

diff --git a/plugins/lime-plugin-rx/src/sections/system.tsx b/plugins/lime-plugin-rx/src/sections/system.tsx
@@ -0,0 +1,85 @@
+import { Trans, plural, t } from "@lingui/macro";
+import { Fragment } from "preact";
+
+import {
+    IconsClassName,
+    Section,
+    SectionTitle,
+} from "plugins/lime-plugin-rx/src/components/components";
+import { GearIcon } from "plugins/lime-plugin-rx/src/icons/gearIcon";
+import { useNodeStatus } from "plugins/lime-plugin-rx/src/rxQueries";
+
+import { useBoardData } from "utils/queries";
+import { IGetBoardDataResponse } from "utils/types";
+
+const toHHMMSS = (seconds: string, plus: number) => {
+    const secNum = parseInt(seconds, 10) + plus;
+    const days = Math.floor(secNum / 86400);
+    const hours = Math.floor(secNum / 3600) % 24;
+    const mins = Math.floor(secNum / 60) % 60;
+    const secs = secNum % 60;
+    const daysText = days
+        ? plural(days, { one: "# day", other: "# days" })
+        : null;
+    const hoursText = hours
+        ? plural(hours, { one: "# hour", other: "# hours" })
+        : null;
+    const minsText = mins
+        ? plural(mins, { one: "# minute", other: "# minutes" })
+        : null;
+    const secsText = secs
+        ? plural(secs, { one: "# second", other: "# seconds" })
+        : null;
+    const allTexts = [daysText, hoursText, minsText, secsText];
+    return allTexts.filter((x) => x !== null).join(", ");
+};
+
+const SystemInfo = () => {
+    const { data: node } = useNodeStatus();
+    const { data: bd } = useBoardData();
+
+    const boardData = bd as IGetBoardDataResponse;
+    const secNum = parseInt(node?.uptime, 10);
+    const attributes = [
+        {
+            label: t`Uptime`,
+            value: toHHMMSS(node?.uptime, 0),
+        },
+        { label: t`Device`, value: boardData.board_name },
+        { label: t`Firmware`, value: boardData.release.description },
+    ];
+    return (
+        <div className="flex justify-start px-10">
+            <div className="grid grid-cols-4 gap-4">
+                {attributes.map((attribute, i) => (
+                    <Fragment key={i}>
+                        <div className="col-span-1 text-left pr-4 font-bold">
+                            {attribute.label}:
+                        </div>
+                        <div className="col-span-3 text-left">
+                            {attribute.value}
+                        </div>
+                    </Fragment>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export const System = () => {
+    const { isLoading: isLoadingNodeStatus } = useNodeStatus();
+    const { isLoading: isLoadingBoardData } = useBoardData();
+
+    const isLoading = isLoadingBoardData || isLoadingNodeStatus;
+
+    return (
+        <Section>
+            <SectionTitle icon={<GearIcon className={IconsClassName} />}>
+                <Trans>System</Trans>
+            </SectionTitle>
+            <div className={"mt-4"}>
+                {isLoading ? <span>Loading...</span> : <SystemInfo />}
+            </div>
+        </Section>
+    );
+};
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -0,0 +1,15 @@
+export interface IGetBoardDataResponse {
+    kernel: string;
+    hostname: string;
+    system: string;
+    model: string;
+    board_name: string;
+    rootfs_type: string;
+    release: {
+        distribution: string;
+        version: string;
+        revision: string;
+        target: string;
+        description: string;
+    };
+}