refactor(log-modal): 🎉 update log modal

.github/workflows/onpremise-tta-01.yaml

@@ -0,0 +1,41 @@
+name: Docker Image (onpremise-tta-01)
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: onpremise-tta-01
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Extract Version from package.json
+        id: project_version
+        run: echo "::set-output name=version::$(node -e 'console.log(require("./package.json").version)')"
+
+      - name: Build the Docker Image
+        run: |
+          docker build \
+            --file Dockerfile \
+            --tag robolaunchio/frontend-onpremise:${{ steps.project_version.outputs.version }}-tta-01 \
+            --build-arg REACT_APP_BACKEND_URL=${{ secrets.REACT_APP_BACKEND_URL }} \
+            --build-arg REACT_APP_KEYCLOAK_URL=${{ secrets.REACT_APP_KEYCLOAK_URL }} \
+            --build-arg REACT_APP_KEYCLOAK_REALM=${{ secrets.REACT_APP_KEYCLOAK_REALM }} \
+            --build-arg REACT_APP_KEYCLOAK_CLIENT_ID=${{ secrets.REACT_APP_KEYCLOAK_CLIENT_ID }} \
+            --build-arg REACT_APP_APPLICATION=${{ secrets.REACT_APP_APPLICATION }} \
+            --build-arg REACT_APP_CREATE_ORGANIZATION=${{ secrets.REACT_APP_CREATE_ORGANIZATION }} \
+            --build-arg REACT_APP_CREATE_REGION=${{ secrets.REACT_APP_CREATE_REGION }} \
+            --build-arg REACT_APP_CREATE_INSTANCE=${{ secrets.REACT_APP_CREATE_INSTANCE }} \
+            .
+
+      - name: Login to Docker Hub
+        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Push the Docker Image to Docker Hub
+        run: docker push robolaunchio/frontend-onpremise:${{ steps.project_version.outputs.version }}-tta-01

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",
@@ -76,6 +76,7 @@
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "react-scroll-to-bottom": "^4.2.0",
+    "react-select": "^5.8.0",
     "react-simple-maps": "^3.0.0",
     "react-step-progress-bar": "^1.0.3",
     "react-tag-input-component": "^2.0.2",

src/components/CFAdvancedSettings/CFAdvancedSettings.tsx

@@ -1,4 +1,3 @@
-import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
 import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
 import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
 import { IDetails } from "../../interfaces/robotInterfaces";
@@ -8,6 +7,8 @@ import { FormikProps } from "formik/dist/types";
 import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
 import Seperator from "../Seperator/Seperator";
+import CFHostDirectories2 from "../CFHostDirectories2/CFHostDirectories2";
+// import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
 
 interface ICFAdvancedSettings {
   formik: FormikProps<IDetails>;
@@ -23,14 +24,19 @@ export default function CFAdvancedSettings({
   return (
     <Accordion
       id={0}
-      header={<div className="text-light-900 text-xs">Advanced Settings</div>}
-      className="!border-light-100 rounded-md shadow-none"
+      header={<div className="text-xs text-light-900">Advanced Settings</div>}
+      className="rounded-md !border-light-100 shadow-none"
       isOpen={isOpen}
       handleOpen={() => {
         setIsOpen(!isOpen);
       }}
     >
       <div className="flex flex-col gap-8 px-4 pb-6 pt-2">
+        {/* <CFSection>
+          <CFHostDirectories />
+          <Seperator />
+        </CFSection> */}
+
         <CFSection gap={4}>
           <CFPersistDirTags formik={formik} disabled={disabled} />
           <Seperator />
@@ -42,7 +48,7 @@ export default function CFAdvancedSettings({
         </CFSection>
 
         <CFSection gap={4}>
-          <CFHostDirectories formik={formik} disabled={disabled} />
+          <CFHostDirectories2 formik={formik} disabled={disabled} />
           <Seperator />
         </CFSection>
 

src/components/CFHostDirectories/CFHostDirectories.tsx

@@ -1,53 +1,62 @@
-import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import CFHostDirectoriesInput from "../CFHostDirectoriesInput/CFHostDirectoriesInput";
-import { IDetails } from "../../interfaces/robotInterfaces";
-import { FormikProps } from "formik/dist/types";
-import CFInfoBar from "../CFInfoBar/CFInfoBar";
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
+import useFunctions from "../../hooks/useFunctions";
+import Select from "react-select";
 
-interface ICFHostDirectories {
-  formik: FormikProps<IDetails>;
-  disabled?: boolean;
-}
+export default function CFHostDirectories(): ReactElement {
+  const [menuIsOpen, setMenuIsOpen] = useState<boolean>(false);
+  const [selectableItems, setSelectableItems] = useState<string[]>([]);
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const { getFiles } = useFunctions();
 
-export default function CFHostDirectories({
-  formik,
-  disabled,
-}: ICFHostDirectories): ReactElement {
-  return (
-    <div>
-      <CFInfoBar
-        label="Host Directories:"
-        tip="You can link a directory on the host to the directory specified in the application here."
-        vertical
-      >
-        <div className="flex flex-col gap-2">
-          {formik.values.hostDirectories?.map((_, index) => {
-            return (
-              <CFHostDirectoriesInput
-                key={index}
-                index={index}
-                formik={formik}
-                disabled={disabled}
-              />
-            );
-          })}
-        </div>
-      </CFInfoBar>
+  useEffect(() => {
+    handleGetSelectableItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    console.log("selectableItems", selectableItems);
+    console.log("selectedItems", selectedItems);
+  }, [selectableItems, selectedItems]);
+
+  async function handleGetSelectableItems(paths?: string[]) {
+    const { items } = await getFiles(paths || []);
 
-      <CreateRobotFormAddButton
-        onClick={() => {
-          formik.setFieldValue("hostDirectories", [
-            ...formik.values.hostDirectories,
-            {
-              hostDirectory: "",
-              mountPath: "",
-            },
-          ]);
+    if (items?.length) {
+      setSelectableItems(
+        items
+          ?.filter((item: any) => item.isDir)
+          ?.map((item: any) => `/${item.name}`),
+      );
+    } else {
+      setSelectableItems([]);
+      setMenuIsOpen(false);
+    }
+  }
+
+  return (
+    <>
+      <Select
+        menuIsOpen={menuIsOpen}
+        options={
+          selectableItems?.map((item) => ({
+            value: item,
+            label: selectedItems?.join("") || item,
+          })) || []
+        }
+        onChange={(e) => {
+          if (e) {
+            handleGetSelectableItems([...selectedItems, e.value]);
+            setSelectedItems([...selectedItems, e.value]);
+          }
+        }}
+        onFocus={() => setMenuIsOpen(true)}
+        onBlur={() => setMenuIsOpen(false)}
+        value={{
+          value: selectedItems?.join("") || "",
+          label: selectedItems?.join("") || "",
         }}
-        className="!mt-1"
-        disabled={disabled}
+        isClearable
       />
-    </div>
+    </>
   );
 }

src/components/CFHostDirectories2/CFHostDirectories2.tsx

@@ -0,0 +1,53 @@
+import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
+import CFHostDirectoriesInput from "../CFHostDirectoriesInput/CFHostDirectoriesInput";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik/dist/types";
+import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import { ReactElement } from "react";
+
+interface ICFHostDirectories {
+  formik: FormikProps<IDetails>;
+  disabled?: boolean;
+}
+
+export default function CFHostDirectories({
+  formik,
+  disabled,
+}: ICFHostDirectories): ReactElement {
+  return (
+    <div>
+      <CFInfoBar
+        label="Host Directories:"
+        tip="You can link a directory on the host to the directory specified in the application here."
+        vertical
+      >
+        <div className="flex flex-col gap-2">
+          {formik.values.hostDirectories?.map((_, index) => {
+            return (
+              <CFHostDirectoriesInput
+                key={index}
+                index={index}
+                formik={formik}
+                disabled={disabled}
+              />
+            );
+          })}
+        </div>
+      </CFInfoBar>
+
+      <CreateRobotFormAddButton
+        onClick={() => {
+          formik.setFieldValue("hostDirectories", [
+            ...formik.values.hostDirectories,
+            {
+              hostDirectory: "",
+              mountPath: "",
+            },
+          ]);
+        }}
+        className="!mt-1"
+        disabled={disabled}
+      />
+    </div>
+  );
+}

src/components/ServiceLogs/ServiceLogs.tsx

@@ -1,21 +1,28 @@
 import ServiceLogModal from "../../modals/ServiceLogModal";
 import { ReactElement, useState } from "react";
 import { RiListCheck } from "react-icons/ri";
+import useRobot from "../../hooks/useRobot";
 
 interface IServiceLogs {
   type: "vdi" | "ide";
 }
 
 export default function ServiceLogs({ type }: IServiceLogs): ReactElement {
   const [isOpenedModal, setIsOpenedModal] = useState<boolean>(false);
+  const { responseRobot } = useRobot();
 
   return (
     <button className="flex cursor-pointer flex-col items-center gap-1 text-light-700 transition-all duration-200 hover:scale-90 hover:text-primary-400">
       <RiListCheck size={16} onClick={() => setIsOpenedModal(true)} />
       <p className="whitespace-nowrap text-[0.62rem]">Service Logs</p>
       {isOpenedModal && (
         <ServiceLogModal
-          type={type}
+          log={
+            type === "ide"
+              ? responseRobot?.ideApplicationLog
+              : responseRobot?.vdiApplicationLog
+          }
+          header={type === "ide" ? "IDE" : "VDI"}
           handleCloseModal={() => setIsOpenedModal(false)}
         />
       )}

src/components/WidgetSystemBackendCell/WidgetSystemBackendCell.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactElement, useState } from "react";
+import { Fragment, ReactElement, useEffect, useState } from "react";
 import useMain from "../../hooks/useMain";
 import StateCell from "../TableInformationCells/StateCell";
 import { RxOpenInNewWindow } from "react-icons/rx";
@@ -8,6 +8,10 @@ export default function WidgetSystemBackendCell(): ReactElement {
   const { pagesState } = useMain();
   const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
 
+  useEffect(() => {
+    console.log("AAA", pagesState?.instance);
+  }, [pagesState]);
+
   return (
     <Fragment>
       <div className="flex items-center justify-center">
@@ -35,6 +39,7 @@ export default function WidgetSystemBackendCell(): ReactElement {
       </div>
       {isOpenModal && (
         <ServiceLogModal
+          header="System Status (Backend)"
           log={pagesState?.instance?.systemStatus?.[1]?.log}
           handleCloseModal={() => setIsOpenModal(false)}
         />

src/components/WidgetSystemOperatorCell/WidgetSystemOperatorCell.tsx

@@ -35,6 +35,7 @@ export default function WidgetSystemOperatorCell(): ReactElement {
       </div>
       {isOpenModal && (
         <ServiceLogModal
+          header="System Status (Operator)"
           log={pagesState?.instance?.systemStatus?.[0]?.log}
           handleCloseModal={() => setIsOpenModal(false)}
         />

src/contexts/FunctionsContext.tsx

@@ -29,6 +29,7 @@ import {
   getLaunchManagers as getLaunchManagerDispatch,
   createRobot as createRobotDispatch,
   createBuildManager as createBuildManagerDispatch,
+  getFiles as getFilesDispatch,
 } from "../toolkit/RobotSlice";
 import {
   getFederatedFleets,
@@ -1344,6 +1345,24 @@ export default ({ children }: any) => {
     });
   }
 
+  async function getFiles(paths?: string[]): Promise<any> {
+    return new Promise<any>(async (resolve, reject) => {
+      try {
+        const response = await dispatch(
+          getFilesDispatch({
+            paths: paths,
+          }),
+        );
+
+        resolve({
+          items: response?.payload?.items || [],
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
   function navigateTo404() {
     toast.error("The current page does not exist or is not available to you.");
     navigate("/404");
@@ -1377,6 +1396,7 @@ export default ({ children }: any) => {
         createEnvironment,
         createBuildManager,
         getIP,
+        getFiles,
       }}
     >
       {children}

src/interfaces/useFunctionsInterfaces.ts

@@ -226,6 +226,7 @@ export interface IuseFunctions {
   createEnvironment: (withoutWorkspaces?: boolean) => Promise<void>;
   createBuildManager: () => void;
   getIP: () => void;
+  getFiles: (paths?: string[]) => Promise<any>;
 
   handleSetterCurrentOrganization: (
     urlOrganizationName: string | undefined,

src/middlewares/axios.interceptor.github.ts

@@ -1,8 +1,8 @@
-import axios from "axios";
+import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 
 const axiosInterceptorGithub: any = axios.create({});
 
-axiosInterceptorGithub.interceptors.request.use(async (req: any) => {
+axiosInterceptorGithub.interceptors.request.use((req: AxiosRequestConfig) => {
   req.headers.Authorization = `Bearer ${JSON.parse(
     localStorage.getItem("githubTokens") as any,
   )?.access_token}`;
@@ -11,7 +11,7 @@ axiosInterceptorGithub.interceptors.request.use(async (req: any) => {
   return req;
 });
 
-axiosInterceptorGithub.interceptors.response.use(async (res: any) => {
+axiosInterceptorGithub.interceptors.response.use((res: AxiosResponse) => {
   return res;
 });