chore(rx-page): add system information

fix #436

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>
+);

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>

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>
+    );
+};

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;
+    };
+}