Added docker and fixed build issues

unicam-complex-system · Jan 25, 2024 · 307ee29 · 307ee29
1 parent 0435aaf
commit 307ee29
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 59 deletions.
diff --git a/Backend/.env-openvidu b/Backend/.env-openvidu
@@ -1,5 +1,5 @@
 OPENVIDU_SECRET=MY_SECRET
 OPENVIDU_WEBHOOK=true
-OPENVIDU_WEBHOOK_ENDPOINT=https://192.168.129.175:8080/media-server
+OPENVIDU_WEBHOOK_ENDPOINT=https://backend:8080/media-server
 
 
diff --git a/Frontend/Dockerfile b/Frontend/Dockerfile
@@ -0,0 +1,23 @@
+# Use the official Node.js image as the base image
+FROM node:14-alpine
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the entire app to the working directory
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Expose the port that your Next.js app will run on
+EXPOSE 3000
+
+# Start the Next.js app
+CMD ["npm", "start"]
diff --git a/Frontend/src/api/axios-client.ts → Frontend/src/api/axios-client.tsx b/Frontend/src/api/axios-client.ts → Frontend/src/api/axios-client.tsx
@@ -6,12 +6,8 @@ type RequestHeaderOptions = {
   Authorization?: string;
 };
 
-const accessToken = sessionStorage.getItem("access_token");
 const headers: RequestHeaderOptions = {};
 
-if (accessToken) {
-  headers.Authorization = `Bearer ${sessionStorage.getItem("access_token")}`;
-}
 export const axiosClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
   headers: { ...headers },

diff --git a/Frontend/src/components/input/input.tsx b/Frontend/src/components/input/input.tsx
@@ -11,7 +11,7 @@ type PropsType = {
 
 /**  This component renders a input field */
 export const Input = React.forwardRef<HTMLInputElement, PropsType>(
-  ({ label, password = false, error = undefined, ...props }, ref) => {
+  ({ label, password = false, error = undefined, ...props }, ref:any) => {
     return (
       <div className="py-1">
         <div className={"font-bold pb-2"}>{label}</div>

diff --git a/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx b/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
@@ -45,13 +45,13 @@ export const AuthorizedCounterContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>No of attempts on:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>

diff --git a/...tainers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx b/...tainers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx
@@ -496,13 +496,13 @@ export const AuthorizedUnauthorizedLineContainer: FC = () => {
         <div className={"pt-3 flex  gap-2 items-center"}>
           <span>Date:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>

diff --git a/...ontainers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx b/...ontainers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx
@@ -58,13 +58,13 @@ export const AuthorizedUnauthorizedPieContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>Date:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>

diff --git a/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx b/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
@@ -4,14 +4,14 @@ import { Card, Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
 
 export const RecentAuthorizedContainer: FC = () => {
-  const authorizedEntities = recentActivitiesData
-    .filter((item) => item.entity !== undefined)
-    .slice(0, 5);
+  // const authorizedEntities = recentActivitiesData
+  //   .filter((item) => item.entity !== undefined)
+  //   .slice(0, 5);
   return (
     <>
       <Card header={"Recent Authorzied Activities"}>
         <div className="py-4">
-          <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} />
+          {/* <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} /> */}
         </div>
       </Card>
     </>

diff --git a/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx b/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx
@@ -4,14 +4,14 @@ import { Card, Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
 
 export const RecentUnauthorizedContainer: FC = () => {
-  const authorizedEntities = recentActivitiesData
-    .filter((item) => item.entity === undefined)
-    .slice(0, 5);
+  // const authorizedEntities = recentActivitiesData
+  //   .filter((item) => item.entity === undefined)
+  //   .slice(0, 5);
   return (
     <>
       <Card header={"Recent Unauthorzied Activities"}>
         <div className="py-4">
-          <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} />
+          {/* <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} /> */}
         </div>
       </Card>
     </>

diff --git a/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx b/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx
@@ -45,13 +45,13 @@ export const UnauthorizedCounterContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>No of attempts on:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>

diff --git a/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx b/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx
@@ -24,7 +24,7 @@ import type { AnyObject, AuthorizedEntity, Camera } from "@/types";
 export const UserAreaBarContainer: FC = () => {
   const cameraOptions = cameras.map((item) => ({
     label: item.name,
-    value: item.key,
+    value: item.id,
   }));
   const entityOptions = authorizedEntitiesData.map((item) => ({
     label: item.name,
@@ -70,7 +70,7 @@ export const UserAreaBarContainer: FC = () => {
   };
 
   const handleCameraSelectChange = (value: string[]) => {
-    const selectedCamerasObject = getObjectArray(value, "key", cameras);
+    const selectedCamerasObject = getObjectArray(value, "id", cameras);
     setSelectedCameras(selectedCamerasObject);
   };
 
@@ -130,13 +130,13 @@ export const UserAreaBarContainer: FC = () => {
         <div className={"pt-3 flex  gap-4 items-center"}>
           <div className={"flex  gap-2 items-center"}>
             <span>Date:</span>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
 
           <div className={"grow flex  gap-2 items-center"}>

diff --git a/Frontend/src/containers/layout-container.tsx b/Frontend/src/containers/layout-container.tsx
@@ -10,7 +10,7 @@ import { useSessionSlice, useCameraSlice } from "@/hooks";
 import { ProtectionContainer } from "./protection-container";
 import { NotificationContainer } from "./notification-container";
 import { useQuery } from "react-query";
-import { getCameras } from "@/api";
+import { axiosClient, getCameras } from "@/api";
 import { ModalContainer } from "./modal-container";
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -20,7 +20,7 @@ export const LayoutContainer = ({
   children: React.ReactNode;
 }) => {
   /* state to check if ant design styled loaded */
-  const { session, logOut } = useSessionSlice();
+  const { session, logOut, logIn } = useSessionSlice();
   const { isFullScreenGrid, setCameras } = useCameraSlice();
   const [antStyleLoaded, setAntStyleLoaded] = useState<boolean>(false);
   const [currentNavMenu, setCurrentNavMenu] = useState<NavBarItem[]>([]);
@@ -44,6 +44,13 @@ export const LayoutContainer = ({
   /* useEffect */
   useEffect(() => {
     setAntStyleLoaded(true);
+    const accessToken = sessionStorage.getItem("access_token");
+    if (accessToken) {
+      axiosClient.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${sessionStorage.getItem("access_token")}`;
+      logIn({ accessToken: accessToken });
+    }
   }, []);
 
   useEffect(() => {
@@ -92,10 +99,11 @@ export const LayoutContainer = ({
               <Layout>
                 <Header className="bg-primary flex justify-end" />
                 <Content
-                  className={`${isFullScreenGrid
-                    ? "fixed top-0 left-0 w-screen h-screen"
-                    : "pt-6 px-4 p-0"
-                    }`}
+                  className={`${
+                    isFullScreenGrid
+                      ? "fixed top-0 left-0 w-screen h-screen"
+                      : "pt-6 px-4 p-0"
+                  }`}
                 >
                   <div className="p-2 bg-white min-h-[360px]">{children}</div>
                 </Content>

diff --git a/Frontend/src/containers/recent-activities-container.tsx b/Frontend/src/containers/recent-activities-container.tsx
@@ -44,20 +44,22 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
 
   useEffect(() => {
     if (isErrorRecentActivities) {
+      const error: any = isErrorRecentActivities;
       openNotification({
         type: "error",
-        message: isErrorRecentActivities?.response?.data
-          ? isErrorRecentActivities?.response?.data?.message
-          : isErrorRecentActivities?.message,
+        message: error?.response?.data
+          ? error?.response?.data?.message
+          : error?.message,
       });
     }
 
     if (isErrorRecentActivitiesCount) {
+      const error: any = isErrorRecentActivitiesCount;
       openNotification({
         type: "error",
-        message: isErrorRecentActivitiesCount?.response?.data
-          ? isErrorRecentActivitiesCount?.response?.data?.message
-          : isErrorRecentActivitiesCount?.message,
+        message: error?.response?.data
+          ? error?.response?.data?.message
+          : error?.message,
       });
     }
   }, [isErrorRecentActivities, isErrorRecentActivitiesCount]);
@@ -68,11 +70,12 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
         columns={recentActivitiesColumns}
         data={
           /* recentActivitiesFetchedData */ recentActivitiesData?.map(
-          (event) => ({
-            ...event,
-            cameraName: cameras.find((item) => item.id == event.cameraId)?.name,
-          })
-        )
+            (event) => ({
+              ...event,
+              cameraName: cameras.find((item) => item.id == event.cameraId)
+                ?.name,
+            })
+          )
         }
         pagination={{
           total: recentActivitiesCountFetchedData,

diff --git a/Frontend/src/containers/settings-container.tsx b/Frontend/src/containers/settings-container.tsx
@@ -18,7 +18,6 @@ export const SettingsContainer: FC<PropsType> = () => {
   /* state*/
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const { cameras } = useCameraSlice();
-  console.log(cameras);
   const {
     control,
     handleSubmit,

diff --git a/Frontend/src/containers/video-stream-container.tsx b/Frontend/src/containers/video-stream-container.tsx
@@ -17,16 +17,6 @@ const webSocketURL = process.env.NEXT_PUBLIC_BACKEND_URL
   ? process.env.NEXT_PUBLIC_BACKEND_URL
   : "";
 
-const socket = io(webSocketURL, {
-  transportOptions: {
-    polling: {
-      extraHeaders: {
-        Authorization: `Bearer ${sessionStorage.getItem("access_token")}`,
-      },
-    },
-  },
-});
-
 /* This container renders different video recording screens */
 export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
   const [subscribers, setSubscribers] = useState<any[]>([]);
@@ -60,6 +50,16 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
 
   /* useEffect hooks */
   useEffect(() => {
+    const socket = io(webSocketURL, {
+      transportOptions: {
+        polling: {
+          extraHeaders: {
+            Authorization: `Bearer ${sessionStorage.getItem("access_token")}`,
+          },
+        },
+      },
+    });
+
     const openVidu = new OpenVidu();
     const session = openVidu.initSession();
 

diff --git a/Frontend/src/store/slices/session-slice.ts b/Frontend/src/store/slices/session-slice.ts
@@ -10,11 +10,6 @@ let initialState = {
   currentSession: null,
 } as SessionState;
 
-const accessToken = sessionStorage.getItem("access_token");
-if (accessToken) {
-  initialState.currentSession = { accessToken: accessToken };
-}
-
 export const sessionSlice = createSlice({
   name: "session",
   // `createSlice` will infer the state type from the `initialState` argument

diff --git a/README.md b/README.md
@@ -77,6 +77,8 @@ BCRYPT_SALT=...
 OPENVIDU_URL= http://localhost:4443/
 # Put the OPENVIDU_SECRET of the component that you have launched earlier
 OPENVIDU_SECRET=MY_SECRET 
+# NVR IP
+NVR_IP_ADDRESS=localhost:2314 
 ```
 Then you can run
 ```bash

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,11 +12,20 @@ services:
     env_file:
       - .secrets.yml
 
+  openvidu:
+    image: openvidu/openvidu-dev:2.29.0 
+    restart: on-failure # always
+    ports:
+      - "4443:4443"
+    env_file:
+      - ./Backend/.env-openvidu
+
   backend:
     container_name: backend
     image: node:21-alpine
     depends_on:
      - mongo
+     - openvidu
     restart: on-failure # always
     ports:
       - 8080:8080
@@ -26,3 +35,16 @@ services:
     env_file:
       - .secrets.yml
     command: npm run docker:dev
+
+  frontend:
+    build:
+      context: ./Frontend
+      dockerfile: Dockerfile
+    restart: on-failure # always
+    ports:
+      - "3000:3000"
+    env_file:
+      - ./Frontend/.env
+    depends_on:
+      - backend
+