From 03cdeaf5b4dc19e130532d81f8593f563cf864ae Mon Sep 17 00:00:00 2001 From: selankon Date: Wed, 4 Sep 2024 08:17:53 -0500 Subject: [PATCH] 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 --- .../src/containers/nodesList.tsx | 22 ++++- .../src/meshUpgradePage.tsx | 51 ++++++----- .../components/FeatureDetail/LinkDetail.tsx | 9 +- .../FeatureDetail/ShowErrorsDetail.tsx | 24 ++++-- .../src/components/Map/LinkLine.tsx | 2 +- .../src/components/Map/style.less | 2 +- .../src/components/configPage/modals.tsx | 10 ++- .../lime-plugin-mesh-wide/src/lib/utils.ts | 25 +++++- plugins/lime-plugin-rx/src/icons/gearIcon.tsx | 7 ++ plugins/lime-plugin-rx/src/rxPage.tsx | 2 + .../lime-plugin-rx/src/sections/system.tsx | 85 +++++++++++++++++++ src/utils/types.ts | 15 ++++ 12 files changed, 218 insertions(+), 36 deletions(-) create mode 100644 plugins/lime-plugin-rx/src/icons/gearIcon.tsx create mode 100644 plugins/lime-plugin-rx/src/sections/system.tsx create mode 100644 src/utils/types.ts diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList.tsx index 014e85757..4703c6857 100644 --- 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 ; } + if (!data || (data && Object.keys(data).length === 0)) { + return ( + + + No nodes present on the
+ mesh wide upgrade state yet! + + } + /> + + ); + } + return ( <> {data && diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx index 2ef388f15..923008a35 100644 --- 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: ( +
+ Show state +
+ ), + }, + { + key: 1, + repr: ( +
+ Show nodes +
+ ), + }, + ]; + return (
- setShowNodeList(!showNodeList)} - className={"cursor-pointer"} - > - {showNodeList ? ( - Show state - ) : ( - Show nodes - )} -
- } - > + Upgrade all network nodes at once. This proces will take a while and will require user interaction. @@ -80,9 +86,16 @@ const MeshWideUpgrade = () => { This node aborted successfully )} -
- {showNodeList && } - {!showNodeList && } +
+ +
+ {showNodeList === 0 && } + {showNodeList === 1 && } +
diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx index 12dc4351f..07104a692 100644 --- 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 = ( Set reference state for this -
{reference.type} link +
{dataTypeNameMapping(reference.type)} ); if (isDown) { btnText = ( - Delete this {reference.type} link + Delete this {dataTypeNameMapping(reference.type)}
from reference state diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/ShowErrorsDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/ShowErrorsDetail.tsx index da852ce5b..6aa64d328 100644 --- 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 (
- {dataType} + {dataTypeNameMapping(dataType)}
{nodes && ( @@ -71,12 +74,19 @@ export const ShowErrorsDetail = ({ errors }: { errors: ErrorsDetails }) => { Are they installed or properly initialized? - {[...errors.meshWideDataErrors].map((data, k) => ( -
- {JSON.stringify(data.queryKey, null, 2)}:{" "} - {data?.error?.toString()} -
- ))} + {[...errors.meshWideDataErrors].map((data, k) => { + const queryKey = JSON.stringify( + data.queryKey, + null, + 2 + ) as SharedStateDataTypeKeys; + return ( +
+ {dataTypeNameMapping(queryKey)}:{" "} + {data?.error?.toString()} +
+ ); + })}
)} diff --git a/plugins/lime-plugin-mesh-wide/src/components/Map/LinkLine.tsx b/plugins/lime-plugin-mesh-wide/src/components/Map/LinkLine.tsx index b9c82af42..8833242ed 100644 --- 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 index c6618fe17..a5f9bedc9 100644 --- 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 index a0405aad8..a0c1beb17 100644 --- 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 ) => { let title = ( - Set reference state for this {dataType} link? + + Set reference state for this {dataTypeNameMapping(dataType)}? + ); let content = ( This will set the reference state of this link: ); if (isDown) { title = ( - Remove this {dataType} from the reference state + + Remove this {dataTypeNameMapping(dataType)} from the + reference state + ); content = ( diff --git a/plugins/lime-plugin-mesh-wide/src/lib/utils.ts b/plugins/lime-plugin-mesh-wide/src/lib/utils.ts index b6d379887..030a6a2eb 100644 --- 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 new file mode 100644 index 000000000..e35514260 --- /dev/null +++ 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) => ( + + + +); diff --git a/plugins/lime-plugin-rx/src/rxPage.tsx b/plugins/lime-plugin-rx/src/rxPage.tsx index 355243d25..196218b41 100644 --- 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 = ({}) => { +