From 75dfe3f754ca3676f2667c0be9f37c8871f893eb Mon Sep 17 00:00:00 2001 From: gokhangunduz Date: Tue, 22 Aug 2023 14:24:21 +0300 Subject: [PATCH] refactor(objects-create-flow): :tada: update sidebar-content with sub components --- public/css/style.css | 51 +++++++++++++++++++ .../CloudInstancesListItemDesc.tsx | 23 +++++++++ src/components/CountWidget/CountWidget.tsx | 2 +- .../ConnectPhysicalInstanceForm.tsx | 14 ++--- .../CreateForms/CreateRobotFormStep1.tsx | 22 ++++---- .../CreateForms/CreateRobotFormStep2.tsx | 30 +++++------ .../CreateForms/CreateRobotFormStep3.tsx | 14 ++--- .../CreateForms/CreateRobotFormStep4.tsx | 10 ++-- .../FleetsListItemDesc/FleetsListItemDesc.tsx | 35 +++++++++++++ .../HeaderDropdownMenu/HeaderDropdownMenu.tsx | 4 +- .../PrivateSidebar/PrivateSidebar.tsx | 8 +-- .../ProfileConnectedApps.tsx | 2 +- src/components/ProfileInfo/ProfileInfo.tsx | 12 ++--- .../RemoteDesktopController.tsx | 2 +- .../RobotHeaderTabs/RobotHeaderTabs.tsx | 6 +-- .../SidebarLists/CloudInstancesList.tsx | 26 +++------- .../SidebarLists/EnvironmentsList.tsx | 4 +- src/components/SidebarLists/FleetsList.tsx | 35 ++++--------- .../SidebarLists/NamespacesList.tsx | 8 +-- .../SidebarLists/OrganizationsList.tsx | 8 +-- .../SidebarLists/RoboticsCloudsList.tsx | 4 +- src/components/SidebarLists/RobotsList.tsx | 4 +- .../SidebarLists/SidebarListItem.tsx | 7 +-- src/contexts/MissionContext.tsx | 2 +- src/contexts/RobotContext.tsx | 45 ++++++++-------- src/interfaces/mainInterfaces.ts | 10 ++-- src/layouts/SidebarContentLayout.tsx | 10 ++-- .../CloudInstanceDashboardPage.tsx | 18 +++---- .../FleetDashboardPage/FleetDashboardPage.tsx | 51 ++++++++++--------- src/pages/RobotPage/RobotPage.tsx | 2 +- 30 files changed, 272 insertions(+), 197 deletions(-) create mode 100644 src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx create mode 100644 src/components/FleetsListItemDesc/FleetsListItemDesc.tsx diff --git a/public/css/style.css b/public/css/style.css index 4d579c34..c34f7901 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1507,6 +1507,27 @@ video { animation: spin 1s linear infinite; } +@-webkit-keyframes ping { + 75%, 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +@keyframes ping { + 75%, 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +.animate-ping { + -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + .\!cursor-not-allowed { cursor: not-allowed !important; } @@ -3201,6 +3222,20 @@ td { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.hover\:scale-\[0\.98\.5\]:hover { + --tw-scale-x: 0.98.5; + --tw-scale-y: 0.98.5; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:scale-\[0\.985\]:hover { + --tw-scale-x: 0.985; + --tw-scale-y: 0.985; + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .hover\:cursor-not-allowed:hover { cursor: not-allowed; } @@ -3394,6 +3429,22 @@ td { .md\:w-\[40rem\] { width: 40rem; } + + .md\:w-\[30rem\] { + width: 30rem; + } + + .md\:w-\[34rem\] { + width: 34rem; + } + + .md\:w-\[36rem\] { + width: 36rem; + } + + .md\:w-\[38rem\] { + width: 38rem; + } } @media (min-width: 1024px) { diff --git a/src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx b/src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx new file mode 100644 index 00000000..f470c772 --- /dev/null +++ b/src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx @@ -0,0 +1,23 @@ +import React, { ReactElement } from "react"; +import StateCell from "../Cells/StateCell"; + +interface ICloudInstancesListItemDesc { + instance: any; +} + +export default function CloudInstancesListItemDesc({ + instance, +}: ICloudInstancesListItemDesc): ReactElement { + return ( +
+
+ RS: + +
+
+ PS: + +
+
+ ); +} diff --git a/src/components/CountWidget/CountWidget.tsx b/src/components/CountWidget/CountWidget.tsx index 3de46e78..5be4ccfd 100644 --- a/src/components/CountWidget/CountWidget.tsx +++ b/src/components/CountWidget/CountWidget.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from "react"; import Widget from "../../layouts/WidgetLayout"; -import { GoGraph } from "react-icons/go"; import ReactApexChart from "react-apexcharts"; +import { GoGraph } from "react-icons/go"; interface ICountWidget { data: any[] | undefined; diff --git a/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx b/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx index d14a4319..14a30724 100644 --- a/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx +++ b/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx @@ -1,15 +1,15 @@ -import { useFormik } from "formik"; import React, { ReactElement } from "react"; +import { addPhysicalInstance } from "../../toolkit/InstanceSlice"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import { useAppDispatch } from "../../hooks/redux"; +import { useKeycloak } from "@react-keycloak/web"; import InputError from "../InputError/InputError"; import InputText from "../InputText/InputText"; -import Button from "../Button/Button"; -import useMain from "../../hooks/useMain"; -import { useAppDispatch } from "../../hooks/redux"; -import { addPhysicalInstance } from "../../toolkit/InstanceSlice"; import { Editor } from "@monaco-editor/react"; -import { CopyToClipboard } from "react-copy-to-clipboard"; +import useMain from "../../hooks/useMain"; +import Button from "../Button/Button"; +import { useFormik } from "formik"; import { toast } from "sonner"; -import { useKeycloak } from "@react-keycloak/web"; export default function ConnectPhysicalInstanceForm(): ReactElement { const [code, setCode] = React.useState(""); diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx index 75f67524..fc10290e 100644 --- a/src/components/CreateForms/CreateRobotFormStep1.tsx +++ b/src/components/CreateForms/CreateRobotFormStep1.tsx @@ -46,10 +46,10 @@ export default function CreateRobotFormStep1({ function handleGetRobot() { getRobot( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId as string, + roboticsCloudName: selectedState?.roboticsCloud?.name as string, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region as string, fleetName: selectedState?.fleet?.name, robotName: robotData?.step1?.robotName || url?.robotName, }, @@ -64,10 +64,10 @@ export default function CreateRobotFormStep1({ function handleGetEnvironment() { getEnvironment( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId as string, + roboticsCloudName: selectedState?.roboticsCloud?.name as string, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region as string, fleetName: selectedState?.fleet?.name, environmentName: url?.robotName as string, }, @@ -88,10 +88,10 @@ export default function CreateRobotFormStep1({ if (isImportRobot) { await dispatch( createRobot({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region!, fleetName: selectedState?.fleet?.name, robotName: formik.values?.robotName, physicalInstanceName: robotData?.step1?.isVirtualRobot @@ -268,9 +268,7 @@ export default function CreateRobotFormStep1({ {/* Robot Services */} - {/* Seperator */} - {/* Seperator */} {/* GPU Resource */}
@@ -288,9 +286,7 @@ export default function CreateRobotFormStep1({
{/* GPU Resource */} - {/* Seperator */} - {/* Seperator */} {/* Development Mode */} {!isImportRobot && ( diff --git a/src/components/CreateForms/CreateRobotFormStep2.tsx b/src/components/CreateForms/CreateRobotFormStep2.tsx index bb5e1279..7ab38404 100644 --- a/src/components/CreateForms/CreateRobotFormStep2.tsx +++ b/src/components/CreateForms/CreateRobotFormStep2.tsx @@ -50,9 +50,9 @@ export default function CreateRobotFormStep2({ if (envOnPremiseRobot) { dispatch( createEnvironment({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, - region: selectedState?.roboticsCloud?.region, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, + region: selectedState?.roboticsCloud?.region!, instanceId: selectedState?.instance?.instanceId, fleetName: selectedState?.fleet?.name, environmentName: robotData?.step1?.robotName, @@ -72,10 +72,10 @@ export default function CreateRobotFormStep2({ } else { dispatch( createRobot({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region!, robotName: robotData?.step1?.robotName, fleetName: selectedState?.fleet?.name, workspaceUpdated: isImportRobot ? true : false, @@ -158,8 +158,8 @@ export default function CreateRobotFormStep2({ function handleGetRobot() { getRobot( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, @@ -175,10 +175,10 @@ export default function CreateRobotFormStep2({ function handleGetEnvironment() { getEnvironment( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region!, fleetName: selectedState?.fleet?.name, environmentName: url?.robotName as string, }, @@ -193,8 +193,8 @@ export default function CreateRobotFormStep2({ function handleGetFleet() { getFleet( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, @@ -209,8 +209,8 @@ export default function CreateRobotFormStep2({ function handleGetNamespace() { getNamespace( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, namespaceName: selectedState?.fleet?.name, diff --git a/src/components/CreateForms/CreateRobotFormStep3.tsx b/src/components/CreateForms/CreateRobotFormStep3.tsx index 83346069..b95a1b64 100644 --- a/src/components/CreateForms/CreateRobotFormStep3.tsx +++ b/src/components/CreateForms/CreateRobotFormStep3.tsx @@ -72,10 +72,10 @@ export default function CreateRobotFormStep3({ function handleGetRobot() { getRobot( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, + region: selectedState?.roboticsCloud?.region!, fleetName: selectedState?.fleet?.name, robotName: robotData?.step1?.robotName, }, @@ -90,8 +90,8 @@ export default function CreateRobotFormStep3({ function handleGetBuildManager() { getBuildManager( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, @@ -143,8 +143,8 @@ export default function CreateRobotFormStep3({ formik.setSubmitting(true); await dispatch( createBuildManager({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, robotName: robotData?.step1?.robotName, diff --git a/src/components/CreateForms/CreateRobotFormStep4.tsx b/src/components/CreateForms/CreateRobotFormStep4.tsx index e709cd34..1c9f2f49 100644 --- a/src/components/CreateForms/CreateRobotFormStep4.tsx +++ b/src/components/CreateForms/CreateRobotFormStep4.tsx @@ -68,8 +68,8 @@ export default function CreateRobotFormStep4({ await dispatch( createLaunchManager({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, physicalInstanceName: robotData?.step1?.physicalInstanceName, @@ -92,7 +92,7 @@ export default function CreateRobotFormStep4({ setTimeout(() => { window.location.href = `/${organizationNameViewer({ - organizationName: selectedState?.organization?.organizationName, + organizationName: selectedState?.organization?.organizationName!, capitalization: false, })}/${selectedState?.roboticsCloud?.name}/${ selectedState?.instance?.name @@ -157,8 +157,8 @@ export default function CreateRobotFormStep4({ function handleGetBuildManager() { getBuildManager( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, diff --git a/src/components/FleetsListItemDesc/FleetsListItemDesc.tsx b/src/components/FleetsListItemDesc/FleetsListItemDesc.tsx new file mode 100644 index 00000000..39ad7739 --- /dev/null +++ b/src/components/FleetsListItemDesc/FleetsListItemDesc.tsx @@ -0,0 +1,35 @@ +import React, { ReactElement } from "react"; +import StateCell from "../Cells/StateCell"; + +interface IFleetsListItemDesc { + fleet: any; + responseFleets: any; +} + +export default function FleetsListItemDesc({ + fleet, + responseFleets, +}: IFleetsListItemDesc): ReactElement { + return ( +
+
+ VI: + +
+ {responseFleets?.filter( + (pFleet: any) => fleet?.name === pFleet?.fleetName + ).length > 0 && ( +
+ PI: + fleet?.name === pFleet?.fleetName + )[0]?.fleetStatus + } + /> +
+ )} +
+ ); +} diff --git a/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx b/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx index 43adc1a4..85ee06d6 100644 --- a/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx +++ b/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx @@ -1,9 +1,9 @@ import React, { Fragment, ReactElement, useState } from "react"; +import { handleLogout } from "../../functions/GeneralFunctions"; import useOnclickOutside from "react-cool-onclickoutside"; -import { Link } from "react-router-dom"; import { useKeycloak } from "@react-keycloak/web"; +import { Link } from "react-router-dom"; import Gravatar from "react-gravatar"; -import { handleLogout } from "../../functions/GeneralFunctions"; export default function HeaderDropdownMenu(): ReactElement { const [isOpen, setIsOpen] = useState(false); diff --git a/src/components/PrivateSidebar/PrivateSidebar.tsx b/src/components/PrivateSidebar/PrivateSidebar.tsx index ebc1cc13..6c04dead 100644 --- a/src/components/PrivateSidebar/PrivateSidebar.tsx +++ b/src/components/PrivateSidebar/PrivateSidebar.tsx @@ -1,12 +1,12 @@ import React, { Fragment, ReactElement, useEffect, useState } from "react"; -import SidebarStaticItem from "../SidebarStaticItem/SidebarStaticItem"; -import SideBarMenuItem from "../SidebarMenuItem/SideBarMenuItem"; -import useMain from "../../hooks/useMain"; -import { useParams } from "react-router-dom"; import { envOnPremiseFleet, envOnPremiseRobot, } from "../../helpers/envProvider"; +import SidebarStaticItem from "../SidebarStaticItem/SidebarStaticItem"; +import SideBarMenuItem from "../SidebarMenuItem/SideBarMenuItem"; +import { useParams } from "react-router-dom"; +import useMain from "../../hooks/useMain"; export default function PrivateSidebar(): ReactElement { const [isLoading, setIsLoading] = useState(true); diff --git a/src/components/ProfileConnectedApps/ProfileConnectedApps.tsx b/src/components/ProfileConnectedApps/ProfileConnectedApps.tsx index 4ed247c5..71931124 100644 --- a/src/components/ProfileConnectedApps/ProfileConnectedApps.tsx +++ b/src/components/ProfileConnectedApps/ProfileConnectedApps.tsx @@ -1,6 +1,6 @@ import React, { Fragment, ReactElement, useState } from "react"; -import CardLayout from "../../layouts/CardLayout"; import InputToggle from "../InputToggle/InputToggle"; +import CardLayout from "../../layouts/CardLayout"; import { useKeycloak } from "@react-keycloak/web"; interface IProfileConnectedApps { diff --git a/src/components/ProfileInfo/ProfileInfo.tsx b/src/components/ProfileInfo/ProfileInfo.tsx index e9a9038b..c7375868 100644 --- a/src/components/ProfileInfo/ProfileInfo.tsx +++ b/src/components/ProfileInfo/ProfileInfo.tsx @@ -1,13 +1,13 @@ import React, { Fragment, ReactElement } from "react"; import CardLayout from "../../layouts/CardLayout"; -import InputText from "../InputText/InputText"; -import { useKeycloak } from "@react-keycloak/web"; -import { useFormik } from "formik"; import InputError from "../InputError/InputError"; -import Gravatar from "react-gravatar"; -import Button from "../Button/Button"; -import { TbEdit } from "react-icons/tb"; +import { useKeycloak } from "@react-keycloak/web"; import { MdOutlineCancel } from "react-icons/md"; +import InputText from "../InputText/InputText"; +import { TbEdit } from "react-icons/tb"; +import Button from "../Button/Button"; +import Gravatar from "react-gravatar"; +import { useFormik } from "formik"; interface IProfileInfo { className?: string; diff --git a/src/components/RemoteDesktopController/RemoteDesktopController.tsx b/src/components/RemoteDesktopController/RemoteDesktopController.tsx index b3e20afe..eb33f837 100644 --- a/src/components/RemoteDesktopController/RemoteDesktopController.tsx +++ b/src/components/RemoteDesktopController/RemoteDesktopController.tsx @@ -1,10 +1,10 @@ import React, { ReactElement, useState } from "react"; -import useVDI from "../../hooks/useVDI"; import { BsFullscreen, BsFullscreenExit } from "react-icons/bs"; import { IoIosArrowUp, IoIosArrowDown } from "react-icons/io"; import VolumeControl from "../VolumeControl/VolumeControl"; import { useKeycloak } from "@react-keycloak/web"; import { TfiReload } from "react-icons/tfi"; +import useVDI from "../../hooks/useVDI"; import Button from "../Button/Button"; interface IRemoteDesktopController { diff --git a/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx b/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx index 69359fc4..0e00bd70 100644 --- a/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx +++ b/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx @@ -1,10 +1,10 @@ import React, { Fragment, ReactElement } from "react"; -import { envOnPremiseRobot } from "../../helpers/envProvider"; import { MdDashboard, MdMap, MdScreenShare } from "react-icons/md"; -import { BiJoystickButton } from "react-icons/bi"; +import { envOnPremiseRobot } from "../../helpers/envProvider"; import { BsCameraVideoFill } from "react-icons/bs"; -import { AiFillCode } from "react-icons/ai"; +import { BiJoystickButton } from "react-icons/bi"; import ContentLoader from "react-content-loader"; +import { AiFillCode } from "react-icons/ai"; import useRobot from "../../hooks/useRobot"; export default function RobotHeaderTabs(): ReactElement { diff --git a/src/components/SidebarLists/CloudInstancesList.tsx b/src/components/SidebarLists/CloudInstancesList.tsx index c9c42fcc..d7d447b5 100644 --- a/src/components/SidebarLists/CloudInstancesList.tsx +++ b/src/components/SidebarLists/CloudInstancesList.tsx @@ -5,8 +5,8 @@ import SidebarInfo from "../SidebarInfo/SidebarInfo"; import useFunctions from "../../hooks/useFunctions"; import SidebarListItem from "./SidebarListItem"; import useMain from "../../hooks/useMain"; -import StateCell from "../Cells/StateCell"; import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; +import CloudInstancesListItemDesc from "../CloudInstancesListItemDesc/CloudInstancesListItemDesc"; interface ICloudInstancesList { reload: boolean; @@ -47,9 +47,9 @@ export default function CloudInstancesList({ function handleGetCloudInstances() { getInstances( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, - region: selectedState?.roboticsCloud?.region, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, + region: selectedState?.roboticsCloud?.region!, details: true, }, { @@ -81,24 +81,10 @@ export default function CloudInstancesList({ key={index} type="instance" name={instance?.name} - description={ -
-
- RS: - -
-
- PS: - -
-
- } + description={} url={`/${organizationNameViewer({ organizationName: - selectedState?.organization?.organizationName, + selectedState?.organization?.organizationName!, capitalization: false, })}/${selectedState?.roboticsCloud?.name}/${instance?.name}`} data={instance} diff --git a/src/components/SidebarLists/EnvironmentsList.tsx b/src/components/SidebarLists/EnvironmentsList.tsx index ff4a073e..2eb8c875 100644 --- a/src/components/SidebarLists/EnvironmentsList.tsx +++ b/src/components/SidebarLists/EnvironmentsList.tsx @@ -51,8 +51,8 @@ export default function EnvironmentsList({ function handleGetEnvironments() { getEnvironments( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, diff --git a/src/components/SidebarLists/FleetsList.tsx b/src/components/SidebarLists/FleetsList.tsx index 71ac99de..a044ee86 100644 --- a/src/components/SidebarLists/FleetsList.tsx +++ b/src/components/SidebarLists/FleetsList.tsx @@ -1,12 +1,12 @@ import React, { Fragment, ReactElement, useEffect, useState } from "react"; +import FleetsListItemDesc from "../FleetsListItemDesc/FleetsListItemDesc"; +import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; +import { envOnPremiseRobot } from "../../helpers/envProvider"; import SidebarInfo from "../SidebarInfo/SidebarInfo"; import useFunctions from "../../hooks/useFunctions"; import { useAppDispatch } from "../../hooks/redux"; import SidebarListItem from "./SidebarListItem"; import useMain from "../../hooks/useMain"; -import StateCell from "../Cells/StateCell"; -import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; -import { envOnPremiseRobot } from "../../helpers/envProvider"; interface IFleetsList { reload: boolean; @@ -57,8 +57,8 @@ export default function FleetsList({ function handleGetFleets() { getFleets( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId as string, + roboticsCloudName: selectedState?.roboticsCloud?.name as string, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, }, @@ -100,27 +100,10 @@ export default function FleetsList({ type="fleet" name={fleet?.name} description={ -
-
- VI: - -
- {responseFleets?.filter( - (pFleet: any) => fleet?.name === pFleet?.fleetName - ).length > 0 && ( -
- PI: - - fleet?.name === pFleet?.fleetName - )[0]?.fleetStatus - } - /> -
- )} -
+ } url={`${ selectedState?.organization?.organizationName?.split( diff --git a/src/components/SidebarLists/NamespacesList.tsx b/src/components/SidebarLists/NamespacesList.tsx index 2188fc7c..0dfd37f7 100644 --- a/src/components/SidebarLists/NamespacesList.tsx +++ b/src/components/SidebarLists/NamespacesList.tsx @@ -1,11 +1,11 @@ import React, { Fragment, ReactElement, useEffect, useState } from "react"; +import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; import SidebarInfo from "../SidebarInfo/SidebarInfo"; import useFunctions from "../../hooks/useFunctions"; import { useAppDispatch } from "../../hooks/redux"; import SidebarListItem from "./SidebarListItem"; -import useMain from "../../hooks/useMain"; import StateCell from "../Cells/StateCell"; -import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; +import useMain from "../../hooks/useMain"; interface INamespacesList { reload: boolean; @@ -56,8 +56,8 @@ export default function NamespacesList({ function handleGetNamespaces() { getNamespaces( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId as string, + roboticsCloudName: selectedState?.roboticsCloud?.name as string, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, }, diff --git a/src/components/SidebarLists/OrganizationsList.tsx b/src/components/SidebarLists/OrganizationsList.tsx index ae65bf4e..0fabdb0b 100644 --- a/src/components/SidebarLists/OrganizationsList.tsx +++ b/src/components/SidebarLists/OrganizationsList.tsx @@ -1,12 +1,12 @@ import React, { Fragment, ReactElement, useEffect, useState } from "react"; -import SidebarListItem from "./SidebarListItem"; import { organizationNameViewer } from "../../functions/GeneralFunctions"; -import useMain from "../../hooks/useMain"; +import { IOrganization } from "../../interfaces/organizationInterfaces"; +import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; import SidebarSelectInfo from "../SidebarInfo/SidebarInfo"; import useFunctions from "../../hooks/useFunctions"; -import SidebarListLoader from "../SidebarListLoader/SidebarListLoader"; +import SidebarListItem from "./SidebarListItem"; import StateCell from "../Cells/StateCell"; -import { IOrganization } from "../../interfaces/organizationInterfaces"; +import useMain from "../../hooks/useMain"; interface IOrganizationList { setItemCount: any; diff --git a/src/components/SidebarLists/RoboticsCloudsList.tsx b/src/components/SidebarLists/RoboticsCloudsList.tsx index 841c540c..ccb528cc 100644 --- a/src/components/SidebarLists/RoboticsCloudsList.tsx +++ b/src/components/SidebarLists/RoboticsCloudsList.tsx @@ -34,7 +34,7 @@ export default function RoboticsCloudsList({ function handleGetRoboticsClouds() { getRoboticsClouds( { - organizationId: selectedState?.organization?.organizationId, + organizationId: selectedState?.organization?.organizationId!, }, { ifErrorNavigateTo404: false, @@ -70,7 +70,7 @@ export default function RoboticsCloudsList({ } url={`/${organizationNameViewer({ organizationName: - selectedState?.organization?.organizationName, + selectedState?.organization?.organizationName!, capitalization: false, })}/${roboticsCloud?.name}`} data={roboticsCloud} diff --git a/src/components/SidebarLists/RobotsList.tsx b/src/components/SidebarLists/RobotsList.tsx index f879d455..fa57ae06 100644 --- a/src/components/SidebarLists/RobotsList.tsx +++ b/src/components/SidebarLists/RobotsList.tsx @@ -51,8 +51,8 @@ export default function RobotsList({ function handleGetRobots() { getRobots( { - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, instanceId: selectedState?.instance?.instanceId, region: selectedState?.instance?.region, fleetName: selectedState?.fleet?.name, diff --git a/src/components/SidebarLists/SidebarListItem.tsx b/src/components/SidebarLists/SidebarListItem.tsx index 36f846ba..3432bfaf 100644 --- a/src/components/SidebarLists/SidebarListItem.tsx +++ b/src/components/SidebarLists/SidebarListItem.tsx @@ -107,7 +107,8 @@ export default function SidebarListItem({ case "robot": navigate( `/${organizationNameViewer({ - organizationName: selectedState?.organization?.organizationName, + organizationName: selectedState?.organization + ?.organizationName as string, capitalization: false, })}/${selectedState?.roboticsCloud?.name}/${ selectedState?.instance?.name @@ -119,7 +120,7 @@ export default function SidebarListItem({ return (
handleSelectItem()} - className={`w-full flex p-3 gap-4 rounded-l-lg border-r transition-300 ${ + className={`w-full flex p-2.5 gap-4 rounded-l-lg border-r transition-300 ${ selected ? "hover:bg-layer-light-200 border-layer-light-400" : "hover:bg-layer-light-100 border-layer-light-200" diff --git a/src/contexts/MissionContext.tsx b/src/contexts/MissionContext.tsx index fbea4f06..005fa377 100644 --- a/src/contexts/MissionContext.tsx +++ b/src/contexts/MissionContext.tsx @@ -1,9 +1,9 @@ import React, { createContext, useEffect, useState } from "react"; +import useRobot from "../hooks/useRobot"; import randomstring from "randomstring"; import saveAs from "file-saver"; import { toast } from "sonner"; import ROSLIB from "roslib"; -import useRobot from "../hooks/useRobot"; export const MissionContext: any = createContext(null); diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx index a97af5a1..a7172f5c 100644 --- a/src/contexts/RobotContext.tsx +++ b/src/contexts/RobotContext.tsx @@ -133,7 +133,7 @@ export default ({ children }: any) => { function handleGetRoboticsCloud() { getRoboticsCloud( { - organizationId: pagesState?.organization?.organizationId, + organizationId: pagesState?.organization?.organizationId as string, roboticsCloudName: url?.roboticsCloudName as string, }, { @@ -147,10 +147,10 @@ export default ({ children }: any) => { function handleGetInstance() { getInstance( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceName: url?.instanceName as string, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, details: true, }, { @@ -164,10 +164,10 @@ export default ({ children }: any) => { function handleGetFleet() { getFleet( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, fleetName: url?.fleetName as string, }, { @@ -181,10 +181,10 @@ export default ({ children }: any) => { function handleGetNamespace() { getNamespace( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, namespaceName: url?.fleetName as string, }, { @@ -198,10 +198,10 @@ export default ({ children }: any) => { function handleGetRobot() { getRobot( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, fleetName: pagesState?.fleet?.name, robotName: url?.robotName as string, }, @@ -216,10 +216,10 @@ export default ({ children }: any) => { function handleGetEnvironment() { getEnvironment( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, fleetName: pagesState?.fleet?.name, environmentName: url?.robotName as string, }, @@ -234,10 +234,10 @@ export default ({ children }: any) => { function handleGetBuildManager() { getBuildManager( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, fleetName: pagesState?.fleet?.name, robotName: url?.robotName as string, }, @@ -252,11 +252,10 @@ export default ({ children }: any) => { function handleGetLaunchManagers() { getLaunchManagers( { - organizationId: pagesState?.organization?.organizationId, - roboticsCloudName: pagesState?.roboticsCloud?.name, + organizationId: pagesState?.organization?.organizationId as string, + roboticsCloudName: pagesState?.roboticsCloud?.name as string, instanceId: pagesState?.instance?.instanceId, - - region: pagesState?.roboticsCloud?.region, + region: pagesState?.roboticsCloud?.region as string, fleetName: pagesState?.fleet?.name, robotName: url?.robotName as string, }, diff --git a/src/interfaces/mainInterfaces.ts b/src/interfaces/mainInterfaces.ts index d14144f1..2c4f46a3 100644 --- a/src/interfaces/mainInterfaces.ts +++ b/src/interfaces/mainInterfaces.ts @@ -1,5 +1,5 @@ -import { IOrganization } from "./organizationInterfaces"; import { IRoboticsCloud } from "./roboticsCloudInterfaces"; +import { IOrganization } from "./organizationInterfaces"; export interface ISidebarState { isOpen: boolean; @@ -18,15 +18,15 @@ export interface ISidebarState { } export interface ISelectedState { - organization: IOrganization; - roboticsCloud: IRoboticsCloud; + organization: IOrganization | null; + roboticsCloud: IRoboticsCloud | null; instance: any; fleet: any; } export interface IpagesState { - organization: IOrganization; - roboticsCloud: IRoboticsCloud; + organization: IOrganization | null; + roboticsCloud: IRoboticsCloud | null; instance: any; fleet: any; } diff --git a/src/layouts/SidebarContentLayout.tsx b/src/layouts/SidebarContentLayout.tsx index dc8e6bec..1fc57c53 100644 --- a/src/layouts/SidebarContentLayout.tsx +++ b/src/layouts/SidebarContentLayout.tsx @@ -237,8 +237,8 @@ export default function SidebarContentLayout(): ReactElement { return (
{handleShowDetails() && }
-
+
{(() => { switch (sidebarState?.page) { case "organization": @@ -399,11 +399,11 @@ export default function SidebarContentLayout(): ReactElement { return (