VolumeHistory update: Correctly renders multiple containers

Co-authored-by: Kenneth Hui <kennethhui121@gmail.com>
Co-authored-by: Tre Hultzen <hultzentre@gmail.com>
Co-authored-by: Dylan Feldman <dfeldman24@gmail.com>
Co-authored-by: Kristine Aguda <kaguda03@gmail.com>

Author: 5 people

src/components/helper/commands.js

@@ -530,6 +530,6 @@ export const getVolumeContainers = (volumeName, getVolumeContainersList) => {
         }]`
       );
 
-      return getVolumeContainersList(listOfVolumeProperties(dockerOutput));
+      return getVolumeContainersList(listOfVolumeProperties(volumeName, dockerOutput));
     });
 };

src/components/helper/volumeHistoryHelper.js

@@ -31,29 +31,48 @@ export const volumeByName = (getVolumeContainers, arrayOfVolumeNames, getVolumeC
 };
 
 /**
- * Updates the state of volumes list
+ * Stores the list of all containers in their respective volume
+ * Edit this fucntion for the details of containers as needed
  * 
+ * @param {string} volumeName
  * @param {Array} dockerOutput
+ * 
+ * Command: ""/docker-entrypoint.…""
+ * CreatedAt: "2021-10-06 21:52:19 -0700 PDT"
+ * ID: "fc614e66202d"
+ * Image: "docker/getting-started"
+ * Labels: "desktop.docker.io/wsl-distro=Ubuntu,maintainer=NGINX Docker Maintainers <docker-maint@nginx.com>"
+ * LocalVolumes: "1"
+ * Mounts: "todo-db"
+ * Names: "busy_shaw"
+ * Networks: "bridge"
+ * Ports: "80/tcp, 0.0.0.0:3001->3001/tcp, :::3001->3001/tcp"
+ * RunningFor: "35 minutes ago"
+ * Size: "1.09kB (virtual 28MB)"
+ * State: "running"
+ * Status: "Up 35 minutes" 
  */
-export const listOfVolumeProperties = (dockerOutput) => {
-  const cache = {};
+export const listOfVolumeProperties = (volumeName, dockerOutput) => {
+  const volumeList = {
+    vol_name: volumeName,
+    containers: [],
+  };
+  let containerProperties = {};
 
+  // list of containers
   for (let i = 0; i < dockerOutput.length; i++) {
-    const volumePropsObj = dockerOutput[i];
+    const container = dockerOutput[i];
 
-    // Edit this for the details of containers in the respective volume as needed
-    for (const key in volumePropsObj) {
-      if (key === 'Names') {
-        cache['Names'] = volumePropsObj['Names'];
-      } 
-      if (key === 'RunningFor') {
-        cache['RunningFor'] = volumePropsObj['RunningFor'];
-      } 
-      if (key === 'Status') {
-        cache['Status'] = volumePropsObj['Status'];
-      } 
+    // properties in each container
+    for (const key in container) {
+      if (key === 'Names') containerProperties['Names'] = container['Names'];
+      if (key === 'State') containerProperties['State'] = container['State'];
+      if (key === 'Status') containerProperties['Status'] = container['Status'];
     }
+    volumeList.containers.push(containerProperties);
+    containerProperties = {};
   }
 
-  return cache;
+  return volumeList;
 };
+

src/components/tabs/VolumeHistory.js

@@ -9,40 +9,61 @@ import React, { useEffect, useState } from 'react';
  */
 const volumeHistory = (props) => {
   const [volumeName, setVolumeName] = useState('');
-  const [volumeList, setVolumeList] = useState(props.arrayOfVolumeNames);
+  const [volumeList, setVolumeList] = useState('');
 
-  // Creates the card components of Name and container details
-  const renderVolumeHistory = (volumeProps) => volumeProps.map((ele, i) => {
+  // Container details
+  const containerDetails = (container, i) => {
+    // unique key error here, fix required
     return (
-      <div className="box" key={`volume${i}`}>
-        <div className="box-label">
-          <h3>{ele.Name}</h3>
-        </div>
-        <div className="volume-details">
-          <li>
-            <strong>Container Names: </strong>
-            {props.volumeContainers[i]['Names']}
-          </li>
+      <div
+        className="volume-container-details"
+        key={`vol.${container.Names}-${i}`}
+      >
+        <strong>Container Name: </strong>
+        {container['Names']}
+        <ul className='volume-container-list'>
           <li>
             <strong>Status: </strong>
-            {props.volumeContainers[i]['Status']}
+            {container['State']}
           </li>
           <li>
             <strong>Running For: </strong>
-            {props.volumeContainers[i]['RunningFor']}
+            {container['Status']}
           </li>
+        </ul>
+      </div>
+    );
+  };
+
+  // Creates the card components of Name and container details
+  const renderVolumeHistory = (volumeProps) => volumeProps.map((ele, i) => {
+    const details = [];
+
+    ele.containers.length
+      ? ele.containers.forEach(el => details.push(containerDetails(el, i)))
+      : details.push(
+        <div>
+          No container found in this volume
+        </div>
+      );
+
+    return (
+      <div className="box" key={`volume${i}`}>
+        <div className="box-label">
+          <h3>{ele.vol_name}</h3>
         </div>
+        {details}
       </div>
     );
   });
 
   // Initializes the volume history tab to be the list of volumes
-  let renderList = renderVolumeHistory(volumeList);
+  let renderList = renderVolumeHistory(props.volumeContainersList);
 
   // Search bar: Finds volume name and renders an individual card
   const handleClick = (e) => {
     e.preventDefault();
-    const result = props.arrayOfVolumeNames.filter(vol => vol.Name.includes(volumeName));
+    const result = volumeList.filter(vol => vol.Name.includes(volumeName));
 
     setVolumeList(result);
     renderList = renderVolumeHistory(volumeList);

src/components/views/Admin.js

@@ -44,7 +44,7 @@ const AdminView = (props) => {
   const imagesList = useSelector((state) => state.images.imagesList);
   const networkList = useSelector((state) => state.networkList.networkList);
   const arrayOfVolumeNames = useSelector((state) => state.volumeList.arrayOfVolumeNames);
-  const volumeContainers = useSelector((state) => state.volumeList.allContainers);
+  const volumeContainersList = useSelector((state) => state.volumeList.volumeContainersList);
 
   // map state to props
   const phoneNumber = useSelector((state) => state.notificationList.phoneNumber);
@@ -184,7 +184,7 @@ const AdminView = (props) => {
           <Route path ="/volume">
             <VolumeHistory 
               arrayOfVolumeNames={arrayOfVolumeNames}
-              volumeContainers={volumeContainers}
+              volumeContainersList={volumeContainersList}
             />
           </Route>
           <Route path="/metrics">

src/components/views/SysAdmin.js

@@ -48,7 +48,7 @@ const SysAdmin = (props) => {
   const networkList = useSelector((state) => state.networkList.networkList);
   const userInfo = useSelector((state) => state.session);
   const arrayOfVolumeNames = useSelector((state) => state.volumeList.arrayOfVolumeNames);
-  const volumeContainers = useSelector((state) => state.volumeList.allContainers);
+  const volumeContainersList = useSelector((state) => state.volumeList.volumeContainersList);
 
   // map state to props
   const phoneNumber = useSelector((state) => state.notificationList.phoneNumber);
@@ -245,7 +245,7 @@ const SysAdmin = (props) => {
           <Route path ="/volume">
             <VolumeHistory 
               arrayOfVolumeNames={arrayOfVolumeNames}
-              volumeContainers={volumeContainers}
+              volumeContainersList={volumeContainersList}
             />
           </Route>
           <Route path="/metrics">

src/components/views/UserView.js

@@ -44,7 +44,7 @@ const UserView = (props) => {
   const imagesList = useSelector((state) => state.images.imagesList);
   const networkList = useSelector((state) => state.networkList.networkList);
   const arrayOfVolumeNames = useSelector((state) => state.volumeList.arrayOfVolumeNames);
-  const volumeContainers = useSelector((state) => state.volumeList.allContainers);
+  const volumeContainersList = useSelector((state) => state.volumeList.volumeContainersList);
 
   // map state to props
   const phoneNumber = useSelector((state) => state.notificationList.phoneNumber);
@@ -183,7 +183,7 @@ const UserView = (props) => {
           <Route path ="/volume">
             <VolumeHistory 
               arrayOfVolumeNames={arrayOfVolumeNames}
-              volumeContainers={volumeContainers}
+              volumeContainersList={volumeContainersList}
             />
           </Route>
           <Route path="/metrics">

src/reducers/volumeHistoryReducer.js

@@ -1,9 +1,16 @@
 /* eslint-disable no-case-declarations */
 import * as types from '../constants/actionTypes';
 
+/**
+ * @description Reducer for the list of containers running in each volume
+ * State has been separated into two arrays for future implementation
+ * 
+ * @param {Array} arrayOfVolumeNames List of volumes running
+ * @param {nested Objects} volumeContainersList Containers running under each volume
+ */
 const initialState = {
   arrayOfVolumeNames: [],
-  allContainers: [],
+  volumeContainersList: [],
 };
 
 export default function (state = initialState, action) {
@@ -17,12 +24,12 @@ export default function (state = initialState, action) {
       };
 
     case types.GET_VOLUME_CONTAINERS_LIST:
-      const containersListState = [...state.allContainers, action.payload];
+      const newVolumeContainersList = [...state.volumeContainersList, action.payload];
       return {
         ...state,
-        allContainers: containersListState
+        volumeContainersList: newVolumeContainersList
       }; 
-      
+    
     default:
       return state;
   }