Skip to content

Commit

Permalink
refactor(data-science): 🎉 add new ds feature
Browse files Browse the repository at this point in the history
  • Loading branch information
gokhangunduz committed Jan 3, 2024
1 parent 4475de7 commit ebb0cab
Show file tree
Hide file tree
Showing 6 changed files with 214 additions and 37 deletions.
8 changes: 8 additions & 0 deletions public/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -1370,6 +1370,14 @@ video {
width: max-content;
}

.\!w-20 {
width: 5rem !important;
}

.\!w-28 {
width: 7rem !important;
}

.min-w-\[12rem\] {
min-width: 12rem;
}
Expand Down
35 changes: 27 additions & 8 deletions src/components/Connections/Connections.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { envApplication } from "../../helpers/envProvider";
import { useKeycloak } from "@react-keycloak/web";
import useRobot from "../../hooks/useRobot";
import { ReactElement } from "react";
import useCreateRobot from "../../hooks/useCreateRobot";

export default function Connections(): ReactElement {
const { responseRobot, connectionsReducer } = useRobot();
const { keycloak } = useKeycloak();
const { robotData } = useCreateRobot();

return (
<div className="flex gap-4">
Expand All @@ -19,8 +21,8 @@ export default function Connections(): ReactElement {
connectionsReducer?.ros === null
? "Waiting"
: connectionsReducer?.ros === true
? "Connected"
: "Warning"
? "Connected"
: "Warning"
}
/>
</div>
Expand All @@ -37,8 +39,8 @@ export default function Connections(): ReactElement {
connectionsReducer?.virtualIDE === null
? "Waiting"
: connectionsReducer?.virtualIDE
? "Connected"
: "Warning"
? "Connected"
: "Warning"
}
/>
</div>
Expand All @@ -53,8 +55,8 @@ export default function Connections(): ReactElement {
connectionsReducer?.physicalIDE === null
? "Waiting"
: connectionsReducer?.physicalIDE
? "Connected"
: "Warning"
? "Connected"
: "Warning"
}
/>
</div>
Expand All @@ -74,11 +76,28 @@ export default function Connections(): ReactElement {
connectionsReducer?.vdi === null
? "Waiting"
: connectionsReducer?.vdi
? "Connected"
: "Warning"
? "Connected"
: "Warning"
}
/>
</div>
{robotData.step1?.jupyterNotebook?.appEndpoint && (
<div className="flex gap-1" id="jupyter">
<ConnectionLabel
label="Jupyter Notebook"
url={robotData.step1.jupyterNotebook.appEndpoint}
/>
<StateCell
state={
connectionsReducer?.virtualIDE === null
? "Waiting"
: connectionsReducer?.virtualIDE
? "Connected"
: "Warning"
}
/>
</div>
)}
</div>
);
}
55 changes: 55 additions & 0 deletions src/components/TableInformationCells/StartStopCell.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Fragment, ReactElement, useState } from "react";
import Button from "../Button/Button";
import StartStopModal from "../../modals/StartStopModal";

interface IStartStopCell {
isRunning: boolean;
loading?: boolean;
disabled?: boolean;
modalText?: string;
handleStart: () => void;
handleStop: () => void;
}

export default function StartStopCell({
isRunning,
loading,
disabled,
modalText,
handleStart,
handleStop,
}: IStartStopCell): ReactElement {
const [isOpenModal, setIsOpenModal] = useState<boolean>(false);

return (
<Fragment>
{loading ? (
<img
className="h-10 w-10"
src="/svg/general/loading.svg"
alt="loading"
/>
) : (
<Button
className={`!h-9 ${
isRunning &&
"border border-primary-500 !bg-transparent !text-primary-500"
}`}
disabled={disabled}
loading={disabled}
text={isRunning ? "Stop" : "Start"}
onClick={() => setIsOpenModal(true)}
/>
)}
{isOpenModal && (
<StartStopModal
isRunning={isRunning}
handleStart={handleStart}
handleStop={handleStop}
handleCloseModal={() => setIsOpenModal(false)}
text={modalText}
/>
)}
</Fragment>
);
}
8 changes: 4 additions & 4 deletions src/components/TableInformationCells/ToggleCell.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import { Fragment, ReactElement } from "react";
import Toggle from "react-toggle";

interface IToggleCell {
Expand All @@ -15,9 +15,9 @@ export default function ToggleCell({
disabled,
onOpenHandle,
onCloseHandle,
}: IToggleCell) {
}: IToggleCell): ReactElement {
return (
<div>
<Fragment>
{loading ? (
<img
className="h-10 w-10"
Expand All @@ -38,6 +38,6 @@ export default function ToggleCell({
defaultChecked={isChecked || false}
/>
)}
</div>
</Fragment>
);
}
97 changes: 72 additions & 25 deletions src/controllers/DataScienceTableData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import BasicCell from "../components/TableInformationCells/BasicCell";
import ToggleCell from "../components/TableInformationCells/ToggleCell";
import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs";
import URLCell from "../components/TableInformationCells/URLCell";
import StartStopCell from "../components/TableInformationCells/StartStopCell";

export function DataScienceTableData() {
const [responseApps, setResponseApps] = useState<
Expand Down Expand Up @@ -127,51 +128,97 @@ export function DataScienceTableData() {
body: (rowData: any) => {
console.log(rowData);
return (
<ToggleCell
isChecked={(() => {
switch (rowData?.toggleState?.status) {
// <ToggleCell
// isChecked={(() => {
// switch (rowData?.toggleState?.status) {
// case "Ready":
// return true;
// default:
// return false;
// }
// })()}
// loading={(() => {
// switch (rowData?.toggleState?.status) {
// case "Not Deployed":
// return false;
// case "Ready":
// return false;
// default:
// return true;
// }
// })()}
// disabled={(() => {
// switch (rowData?.status) {
// case "Not Deployed":
// return false;
// case "Ready":
// return false;
// default:
// return true;
// }
// })()}
// onOpenHandle={() => {
// createDataScienceApp({
// applicationName: rowData?.toggleState?.name,
// });
// setTimeout(() => {
// handleReload();
// }, 1000);
// }}
// onCloseHandle={() => {
// deleteDataScienceApp({
// applicationName: rowData?.toggleState?.name,
// });
// setTimeout(() => {
// handleReload();
// }, 1000);
// }}
// />
<StartStopCell
isRunning={(() => {
switch (rowData?.status) {
case "Ready":
return true;
default:
return false;
}
})()}
loading={(() => {
switch (rowData?.toggleState?.status) {
case "Not Deployed":
return false;
case "Ready":
return false;
default:
return true;
}
})()}
disabled={(() => {
switch (rowData?.status) {
case "Not Deployed":
return false;
case "Ready":
return false;
default:
return true;
}
})()}
onOpenHandle={() => {
handleStart={() => {
createDataScienceApp({
applicationName: rowData?.toggleState?.name,
});
setTimeout(() => {
handleReload();
}, 1000);
}}
onCloseHandle={() => {
handleStop={() => {
deleteDataScienceApp({
applicationName: rowData?.toggleState?.name,
});
setTimeout(() => {
handleReload();
}, 1000);
}}
disabled={(() => {
switch (rowData?.status) {
case "Not Deployed":
return false;
case "Ready":
return false;
default:
return true;
}
})()}
modalText={
(() => {
switch (rowData?.status) {
case "Ready":
return "Are you sure you want to stop this application?";
default:
return "Are you sure you want to start this application?";
}
})() || ""
}
/>
);
},
Expand Down
48 changes: 48 additions & 0 deletions src/modals/StartStopModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { ReactElement } from "react";
import { Dialog } from "primereact/dialog";
import Button from "../components/Button/Button";

interface IStartStopModal {
header?: string;
text?: string;
handleCloseModal: () => void;
isRunning?: boolean;
handleStart: () => void;
handleStop: () => void;
}

export default function StartStopModal({
header,
text,
handleCloseModal,
isRunning,
handleStart,
handleStop,
}: IStartStopModal): ReactElement {
return (
<Dialog
header={`${header || ""} Service Log`}
visible={true}
className="w-[40vw]"
onHide={() => handleCloseModal()}
>
<div className="flex flex-col gap-2">
<p className="text-sm">{text}</p>
<div className="flex justify-end gap-4">
<Button
className="!h-9 !w-28 border border-primary-500 !bg-transparent !text-primary-500"
text="Cancel"
onClick={() => handleCloseModal()}
/>
<Button
className="!h-9 !w-28"
text={isRunning ? "Stop" : "Start"}
onClick={() => {
isRunning ? handleStop() : handleStart();
}}
/>
</div>
</div>
</Dialog>
);
}

0 comments on commit ebb0cab

Please sign in to comment.