Merge pull request #60 from oslabs-beta/drew/process-logs-alerts

Drew/process logs alerts

Author: tiffanynchau

src/components/display/ProcessLogsTable.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { buildOptionsObj } from "../helper/processLogHelper";
-import { getLogs } from "../helper/commands";
-import * as actions from "../../redux/actions/actions";
-import "./ProcessLogsCard";
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { buildOptionsObj } from '../helper/processLogHelper';
+import { getLogs } from '../helper/commands';
+import * as actions from '../../redux/actions/actions';
+import './ProcessLogsCard';
 
 import store from "../../renderer/store";
 import { DataGrid } from "@mui/x-data-grid";
@@ -25,7 +25,7 @@ const ProcessLogsTable = () => {
 
   // grab clicked container
   const urlString = window.location.href;
-  const containerID = urlString.split("/");
+  const containerID = urlString.split('/');
   const id = containerID[containerID.length - 1];
 
   // access runningList from state - store has issue with runningList, ignore until updated
@@ -36,7 +36,7 @@ const ProcessLogsTable = () => {
   const [rows, setRows] = useState([]);
 
   const [csvData, setCsvData] = useState([
-    ["container", "type", "time", "message"],
+    ['container', 'type', 'time', 'message'],
   ]);
 
   const [logs, setLogs] = useState({ stdout: [], stderr: [] });
@@ -63,10 +63,10 @@ const ProcessLogsTable = () => {
   };
 
   const columns = [
-    { field: "container", headerName: "Container", width: 150 },
-    { field: "type", headerName: "Log Type", width: 120 },
-    { field: "time", headerName: "Timestamp", width: 200 },
-    { field: "message", headerName: "Message", width: 550 },
+    { field: 'container', headerName: 'Container', width: 150 },
+    { field: 'type', headerName: 'Log Type', width: 120 },
+    { field: 'time', headerName: 'Timestamp', width: 200 },
+    { field: 'message', headerName: 'Message', width: 550 },
   ];
 
   const createContainerCheckboxes = (currId: string) => {
@@ -142,12 +142,12 @@ const ProcessLogsTable = () => {
         );
         newRows.push({
           container: currCont.Name,
-          type: "stdout",
-          time: log["timeStamp"],
-          message: log["logMsg"],
+          type: 'stdout',
+          time: log['timeStamp'],
+          message: log['logMsg'],
           id: Math.random() * 100,
         });
-        newCSV.push([currCont.Name, "stdout", log["timeStamp"], log["logMsg"]]);
+        newCSV.push([currCont.Name, 'stdout', log['timeStamp'], log['logMsg']]);
       });
 
       stderr.forEach((log, index) => {
@@ -156,16 +156,16 @@ const ProcessLogsTable = () => {
         );
         newRows.push({
           container: currCont.Name,
-          type: "stderr",
-          time: log["timeStamp"],
-          message: log["logMsg"],
+          type: 'stderr',
+          time: log['timeStamp'],
+          message: log['logMsg'],
           id: parseInt(`stderr ${index}`),
         });
-        newCSV.push([currCont.Name, "stderr", log["timeStamp"], log["logMsg"]]);
+        newCSV.push([currCont.Name, 'stderr', log['timeStamp'], log['logMsg']]);
       });
 
       setRows(newRows as keyof typeof setRows);
-      setCsvData([["container", "type", "time", "message"], ...newCSV]);
+      setCsvData([['container', 'type', 'time', 'message'], ...newCSV]);
     }
   };
 
@@ -174,30 +174,54 @@ const ProcessLogsTable = () => {
       <div className="settings-container">
         <form>
           <h1 style={{ margin: 10 }}>Container Process Logs</h1>
-
+          <h3>
+            <a
+              style={{ margin: 5 }}
+              target="_blank"
+              rel="noreferrer"
+              href="https://docs.docker.com/engine/reference/commandline/logs/"
+            >
+              Click here
+            </a>{''}
+            for more information on logs
+          </h3>
+          <br></br>
           <input
             style={{ margin: 5 }}
             type="radio"
             id="sinceInput"
             name="logOption"
           />
-          <label style={{ margin: 5 }} htmlFor="sinceInput">
+          <label
+            style={{ margin: 5 }}
+            htmlFor="sinceInput"
+          >
             Since
           </label>
-          <input type="text" id="sinceText" />
+          <input
+            type="text"
+            id="sinceText"
+          />
           <br></br>
           <input
             style={{ margin: 5 }}
             type="radio"
             id="tailInput"
             name="logOption"
           />
-          <label style={{ margin: 5 }} htmlFor="tailInput">
+          <label
+            style={{ margin: 5 }}
+            htmlFor="tailInput"
+          >
             Tail
           </label>
-          <input style={{ marginLeft: 14 }} type="text" id="tailText" />
+          <input
+            style={{ marginLeft: 14 }}
+            type="text"
+            id="tailText"
+          />
 
-          <FormGroup style={{ display: "flex", flexDirection: "row" }}>
+          <FormGroup style={{ display: 'flex', flexDirection: 'row' }}>
             {containerSelectors} {/** Checkboxes for running containers */}
           </FormGroup>
           <Button
@@ -226,9 +250,9 @@ const ProcessLogsTable = () => {
           >
             <CSVLink
               style={{
-                textDecoration: "none",
-                color: "white",
-                fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                textDecoration: 'none',
+                color: 'white',
+                fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
               }}
               data={csvData}
             >
@@ -239,16 +263,16 @@ const ProcessLogsTable = () => {
 
         <div
           className="process-logs-container"
-          style={{ height: 660, width: "100%" }}
+          style={{ height: 660, width: '100%' }}
         >
           <DataGrid
             key="DataGrid"
             rows={rows}
             columns={columns}
-            getRowHeight={() => "auto"}
+            getRowHeight={() => 'auto'}
             initialState={{
               sorting: {
-                sortModel: [{ field: "time", sort: "desc" }], // default sorts table by time
+                sortModel: [{ field: 'time', sort: 'desc' }], // default sorts table by time
               },
             }}
           />

src/components/helper/commands.tsx

@@ -675,7 +675,7 @@ export const getLogs = async (optionsObj, getContainerLogsDispatcher) => {
     // build inputCommandString to get logs from command line
     let inputCommandString = 'docker logs --timestamps ';
     if (optionsObj.since) {
-      inputCommandString += `--since ${optionsObj.since} `;
+      inputCommandString += `--since ${optionsObj.since} `;      
     }
     optionsObj.tail
       ? (inputCommandString += `--tail ${optionsObj.tail} `)
@@ -684,6 +684,7 @@ export const getLogs = async (optionsObj, getContainerLogsDispatcher) => {
 
     window.nodeMethod.runExec(inputCommandString, (error: child_process.ExecException | null, stdout: string, stderr: string) => {
       if (error) {
+        alert(`Please enter a valid rfc3339 date, Unix timestamp, or Go duration string.`);
         console.error(`exec error: ${error}`);
         return;
       }

src/components/tabs/ProcessLogs.js

@@ -31,7 +31,7 @@ const ProcessLogs = (props) => {
   return (
     <div className='renderContainers'>
       <div className='header'>
-        <h1 className='tabTitle'>Procsess Logs</h1>
+        <h1 className='tabTitle'>Process Logs</h1>
       </div>
 
       <h3>Running Containers: {props.runningList.length}</h3>