feat: add task management

Author: ttyS0

assets/yprocmon.png

@@ -31,6 +31,7 @@ void start_http_server()
                           req.get_header_value("User-Agent").c_str(),
                           res.status);
         });
+    auto ret = svr.set_mount_point("/", "./www");
     svr.Get("/api/ping", [](const httplib::Request &, httplib::Response &res)
             { res.set_content("{\"ping\": true}", "application/json"); });
     svr.Get("/api/status",
@@ -47,7 +48,7 @@ void start_http_server()
                 writer.StartArray();
                 for(auto const& e : state.instances)
                 {
-                    e.Serialize(writer);
+                    e.second.Serialize(writer);
                 }
                 writer.EndArray();
                 res.set_content(s.GetString(), "application/json");
@@ -144,7 +145,7 @@ void start_http_server()
                         e.Serialize(writer);
                         res.set_content(s.GetString(), "application/json");
                         std::lock_guard<std::mutex> guard(state.instances_mutex);
-                        state.instances.push_back(std::move(e));
+                        state.instances[e.pi.dwProcessId] = (std::move(e));
                      }
                      else
                      {

src/yhttp.h

@@ -60,6 +60,13 @@ int _detour_program(const PROCESS_INFORMATION pi)
         console_print("[PROC] GetExitCodeProcess failed: %ld\n",
                       GetLastError());
     }
+    std::lock_guard<std::mutex> guard(state.instances_mutex);
+    if (state.instances.count(pi.dwProcessId) != 0)
+    {
+        state.instances[pi.dwProcessId].status = INSTANCE_EXITED;
+        state.instances[pi.dwProcessId].exitCode = dwResult;
+        state.instances[pi.dwProcessId].waiting.detach();
+    }
     return 0;
 }
 
@@ -107,6 +114,7 @@ bool detour_program(const detour_startup& startup, instance_entry& ret)
     ret.pi.dwThreadId = pi.dwThreadId;
     ret.pi.hProcess = pi.hProcess;
     ret.pi.hThread = pi.hThread;
+    ret.status = INSTANCE_SPAWNED;
     ret.name = std::string(startup.name);
     ret.timestamp = time(nullptr) * 1000;
     return true;

src/yprocmon.cc

@@ -88,5 +88,5 @@ struct yprocmon_state
     std::mutex operations_mutex;
     std::mutex instances_mutex;
     std::vector<yhook_message_entry> operations;
-    std::vector<instance_entry> instances;
+    std::map<DWORD, instance_entry> instances;
 } state;

src/yprocmon.h

@@ -18,6 +18,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "react-transition-group": "^4.4.2",
+    "react-virtualized": "^9.22.3",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

yprocmon-front/package-lock.json

@@ -1,99 +1,98 @@
-import logo from './yprocmon.png'
-import './App.css';
+import logo from "./yprocmon.png";
+import "./App.css";
 import {
   Badge,
   Container,
   Row,
   Col,
   OverlayTrigger,
   Tab,
-  Tooltip
-} from 'react-bootstrap'
+  Tooltip,
+} from "react-bootstrap";
 import {
   BrowserRouter as Router,
   Switch,
   Route,
   Link,
   useRouteMatch,
-  useParams
-} from 'react-router-dom';
+  useParams,
+} from "react-router-dom";
 
-import NavBar from './components/NavBar'
-import About from './pages/About';
-import Rules from './pages/Rules';
-import Monitor from './pages/Monitor';
+import NavBar from "./components/NavBar";
+import About from "./pages/About";
+import Rules from "./pages/Rules";
+import Monitor from "./pages/Monitor";
 
-import { AppProvider } from './AppContext'
-import { useReducer } from 'react';
-import Footer from './components/Footer';
+import { AppProvider, initalState } from "./AppContext";
+import { useReducer } from "react";
+import Footer from "./components/Footer";
 
 function App() {
   const [state, dispatch] = useReducer((state, action) => {
-    switch(action.type) {
-      case 'OPERATIONS_APPEND':
+    switch (action.type) {
+      case "OPERATIONS_APPEND":
         if (!action.payload || action.payload.length == 0) return state;
         const newOperations = action.payload.map((operation) => {
-          const { type, data } = operation
+          const { type, data } = operation;
           let display = {
             type,
-            summary: ''
-          }
-          let summary
-          if (type == 'SPAWN') {
-            display.type = (<Badge bg="dark">{type}</Badge>);
-            display.summary = (
-              <>
-                <Badge bg="dark">process: {data.process}</Badge>{' '}
-                <Badge bg="dark">pid: {data.pid}</Badge>
-              </>
-            )
-          } else if (type == 'HOOK') {
-            display.type = (<Badge bg="primary">{data.name}</Badge>);
-            display.summary = data.args.map(arg => [
-              <OverlayTrigger
-                placement="bottom"
-                delay={{ show: 250, hide: 400 }}
-                overlay={(props) => <Tooltip {...props}>{arg.value}</Tooltip>}
-              >
-                <Badge bg="light" text="dark" key={arg.name}>
-                  <span>{arg.name}:</span>
-                  <Badge pill bg="info">{arg.value.length > 37 ? arg.value.substr(0, 37) + '...' : arg.value}</Badge>
-                </Badge>
-              </OverlayTrigger>,
-              ' '
-            ])
+            summary: "",
+          };
+          let summary;
+          if (type == "SPAWN") {
+            display.type = 'spawn'
+            display.summary = [
+              {
+                key: 'process',
+                value: data.process
+              },
+              {
+                key: 'pid',
+                value: data.pid
+              }
+            ];
+          } else if (type == "HOOK") {
+            display.type = data.name;
+            display.summary = data.args.map((arg) => ({
+              key: arg.name,
+              value:
+                arg.value.length > 37
+                  ? arg.value.substr(0, 37) + "..."
+                  : arg.value,
+              tooltip: arg.value
+            }));
           }
           return {
             ...operation,
-            display
-          }
-        })
+            display,
+          };
+        });
+        return {
+          ...state,
+          operations: state.operations.concat(newOperations),
+        };
+        break;
+      case "OPERATIONS_CLEAR":
         return {
           ...state,
-          operations: state.operations.concat(newOperations)
-        }
+          operationClearAt: new Date().getTime(),
+          operations: [],
+        };
         break;
-      case 'OPERATIONS_CLEAR':
+      case "INSTANCES_UPDATE":
         return {
           ...state,
-          operationClearAt: (new Date).getTime(),
-          operations: []
-        }
+          instances: action.payload,
+        };
         break;
-      case 'FILES_UPDATE':
+      case "FILES_UPDATE":
         return {
           ...state,
-          files: action.payload
-        }
+          files: action.payload,
+        };
         break;
     }
-  }, {
-    operations: [],
-    rules: [],
-    files: [],
-    instances: [],
-    operationClearAt: 0
-  })
+  }, initalState);
   // const operationTimer = setInterval(async () => {
   //   let newOperations;
   //   if (operations.length != 0) {
@@ -106,7 +105,7 @@ function App() {
   // }, 500);
   return (
     <Router>
-      <AppProvider value={{state, dispatch}}>
+      <AppProvider value={{ state, dispatch }}>
         <div className="app">
           <header className="app-header">
             <NavBar logo={logo} title="yprocmon" version="v1.0.0" />

yprocmon-front/package.json

@@ -1,14 +1,43 @@
 import React, { Context } from "react";
+import { Badge } from "react-bootstrap";
 
 const context = React.createContext();
 
 export default context;
 export const AppProvider = context.Provider;
+export const initalState = {
+  operations: [],
+  rules: [],
+  files: [],
+  instances: [],
+//   typemaps: {
+//     MessageBox: <Badge variant="info">MessageBox</Badge>,
+//     CreateFile: <Badge variant="">CreateFile</Badge>,
+//     WriteFile: <Badge variant="">WriteFile</Badge>,
+//     ReadFile: <Badge variant="">ReadFile</Badge>,
+//     HeapCreate: <Badge variant="">HeapCreate</Badge>,
+//     HeapDestroy: <Badge variant="">HeapDestroy</Badge>,
+//     HeapFree: <Badge variant="">HeapFree</Badge>,
+//     RegCreateKeyEx: <Badge variant="">RegCreateKeyEx</Badge>,
+//     RegSetValueEx: <Badge variant="">RegSetValueEx</Badge>,
+//     RegDeleteValue: <Badge variant="">RegDeleteValue</Badge>,
+//     RegCloseKey: <Badge variant="">RegCloseKey</Badge>,
+//     RegOpenKeyEx: <Badge variant="">RegOpenKeyEx</Badge>,
+//     socket: <Badge variant="">socket</Badge>,
+//     bind: <Badge variant="">bind</Badge>,
+//     send: <Badge variant="">send</Badge>,
+//     connect: <Badge variant="">connect</Badge>,
+//     recv: <Badge variant="">recv</Badge>,
+//     memcpy: <Badge variant=""></Badge>,
+//   },
+  operationClearAt: 0,
+  isCapturing: true
+};
 // export const normalizeOperations = (ops, rules) => {
 //   ops.map(o => {
 //     return {
 //       ...o,
 //       summary
-//     } 
+//     }
 //   })
 // }

yprocmon-front/src/App.js

@@ -2,19 +2,40 @@ import axios from 'axios'
 
 class Api
 {
-    constructor(props) {
-        this._client = axios.create({
-            baseURL: props
-        })
-    }
-    async files() {
-        const res = await this._client.get('files')
-        return res.data
-    }
-    async operations(after) {
-        const res = await this._client.get(after ? `operations?after=${after}` : 'operations')
-        return res.data
-    }
+  constructor(props) {
+    this._client = axios.create({
+      baseURL: props
+    })
+  }
+  async files() {
+    const res = await this._client.get('files')
+    return res.data
+  }
+  async operations(after) {
+    const res = await this._client.get(after ? `operations?after=${after}` : 'operations')
+    return res.data
+  }
+  async instances() {
+    const res = await this._client.get('instances')
+    return res.data
+  }
+  async upload(file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const res = await this._client.post('upload', formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    })
+    return res.data;
+  }
+  async run(name, command) {
+    const params = new URLSearchParams();
+    params.append("name", name)
+    params.append("command", command)
+    const res = await this._client.post(`run`, params);
+    return res.data;
+  }
 }
 
 export default new Api('/api')

yprocmon-front/src/AppContext.js

@@ -1,3 +1,22 @@
 .file-list-item-tail {
     float: right;
-}
+}
+
+.file-list-box {
+    position: relative;
+}
+
+.file-list-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.file-list-placeholder {
+    padding: 40px 20px 40px 20px;
+}

yprocmon-front/src/api.js

@@ -1,50 +1,66 @@
 import './FileList.css';
 import {
   Badge,
+  Button,
   Row,
   Col,
-  ListGroup
+  ListGroup,
+  Spinner
 } from 'react-bootstrap'
 import { useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { BsAppIndicator, BsPlayFill } from 'react-icons/bs'
+import { BsAppIndicator, BsPlayFill, BsUpload } from 'react-icons/bs'
 
 function FileList(props) {
   const {
+    open,
     getRootProps,
     getInputProps,
     isDragActive,
     isDragAccept,
     isDragReject
   } = useDropzone({
     accept: '.exe',
-    onDropAccepted: files => console.log(files)
+    onDropAccepted: (f) => {
+      if(!props.uploading) {
+        props.onUpload && props.onUpload(f)
+      }
+    },
+    noClick: true
   });
   return (
-    <ListGroup>
-      {
-        props.files && props.files.map((f, idx) => {
-          const active = props.active == f.name
-          return (
-            <ListGroup.Item action key={f.name} variant={active ? "success" : undefined}>
-              <span><BsAppIndicator /></span>{' '}
-              <span>{ f.name }</span>
-              <div className="file-list-item-tail">
-                {/* <Badge pill bg="primary">
-                  { new Date(f.timestamp * 1000).toLocaleString() }
-                </Badge>{' '} */}
-                <Badge pill bg="success"><BsPlayFill /></Badge>{' '}
-              </div>
-            </ListGroup.Item>
-          )
-        })
-      }
-      <ListGroup.Item>
-        <div {...getRootProps({})}>
-          <input {...getInputProps()} />
-          <p>Drag 'n' drop some files here, or click to select files</p>
-        </div>
-      </ListGroup.Item>
+    <ListGroup className="file-list-box" {...getRootProps({isDragActive, isDragAccept, isDragReject})}>
+    {
+      (props.files && props.files.length != 0) ? props.files.map((f, idx) => {
+        const active = props.active == f.name
+        return (
+          // <ListGroup.Item action key={f.name} variant={active ? "success" : undefined}>
+          <ListGroup.Item action key={f.name} onClick={() => props.onSelect && props.onSelect(f)}>
+            <span><BsAppIndicator /></span>{' '}
+            <span>{ f.name }</span>
+            <div className="file-list-item-tail">
+              <Badge pill bg="success"><BsPlayFill /></Badge>{' '}
+            </div>
+          </ListGroup.Item>
+        )
+      }) : (<ListGroup.Item><div className='file-list-placeholder'>No files available.</div></ListGroup.Item>)
+    }
+    <ListGroup.Item>
+      <input {...getInputProps()} />
+      <Button variant="secondary" size="sm" onClick={open}>
+        Drag 'n' drop or click to select files.
+      </Button>
+    </ListGroup.Item>
+    <div className="file-list-overlay" style={(isDragActive && !props.uploading) ? {} : { display: 'none' }}>
+      <div className="text-white">
+        <BsUpload />{' '}<span>Drag 'n' drop some files here.</span>
+      </div>
+    </div>
+    <div className="file-list-overlay" style={props.uploading ? {} : { display: 'none' }}>
+      <Spinner animation="border" role="status">
+        <span className="visually-hidden">Uploading...</span>
+      </Spinner>
+    </div>
     </ListGroup>
   );
 }

yprocmon-front/src/components/FileList.css

@@ -0,0 +1,22 @@
+.instance-list-item-tail {
+    float: right;
+}
+
+.instance-list-box {
+    position: relative;
+}
+
+.instance-list-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.instance-list-placeholder {
+    padding: 40px 20px 40px 20px;
+}

yprocmon-front/src/components/FileList.js

@@ -0,0 +1,35 @@
+import './InstanceList.css';
+import {
+  Badge,
+  Button,
+  Row,
+  Col,
+  ListGroup,
+  Spinner
+} from 'react-bootstrap'
+import { useState } from 'react';
+import { BsAppIndicator, BsPlayFill, BsUpload } from 'react-icons/bs'
+
+function InstanceList(props) {
+  return (
+    <ListGroup className="instance-list-box">
+    {
+      (props.instances && props.instances.length != 0) ? props.instances.sort((x, y) => x.timestamp - y.timestamp).map((f, idx) => {
+        return (
+          <ListGroup.Item variant={f.status == "exited" ? "danger" : "success"} key={f.pid} onClick={() => props.onSelect && props.onSelect(f)}>
+            <span><BsAppIndicator /></span>{' '}
+            <span>{ f.name }</span>
+            <div className="instance-list-item-tail">
+              {
+                f.status == "exited" ? <Badge pill bg="danger">Exitcode: { f.exitCode }</Badge> : <Badge pill bg="success">PID: { f.pid }</Badge>
+              }
+            </div>
+          </ListGroup.Item>
+        )
+      }) : (<ListGroup.Item><div className='instance-list-placeholder'>No instances.</div></ListGroup.Item>)
+    }
+    </ListGroup>
+  );
+}
+
+export default InstanceList;

yprocmon-front/src/components/InstanceList.css

@@ -1,37 +1,196 @@
 import "./FileList.css";
-import { Container, Badge, Table, Placeholder } from "react-bootstrap";
+import {
+  Container,
+  Badge,
+  Table,
+  OverlayTrigger,
+  Tooltip,
+  Placeholder,
+} from "react-bootstrap";
 import { useEffect, useState, useRef } from "react";
 import { BsAppIndicator, BsPlayFill } from "react-icons/bs";
 import { SwitchTransition, CSSTransition } from "react-transition-group";
+import { AutoSizer, List, Column } from "react-virtualized";
+import "react-virtualized/styles.css";
 
-const ListPlaceholder = Array(10).fill(0).map((_, i) => (
-  <tr key={i}>
-  {
-    Array(5).fill(0).map((_, i) => (
-      <td key={i}>
-        <Placeholder as="div" animation="glow"><Placeholder xs={12} /></Placeholder>
-      </td>
-    ))
-  }
-  </tr>
-))
+const ListPlaceholder = Array(10)
+  .fill(0)
+  .map((_, i) => (
+    <tr key={i}>
+      {Array(5)
+        .fill(0)
+        .map((_, i) => (
+          <td key={i}>
+            <Placeholder as="div" animation="glow">
+              <Placeholder xs={12} />
+            </Placeholder>
+          </td>
+        ))}
+    </tr>
+  ));
+
+const typemaps = {
+  spawn: <Badge bg="dark">spawn</Badge>,
+  MessageBox: <Badge variant="info">MessageBox</Badge>,
+  ...Object.fromEntries(
+    ["CreateFile", "WriteFile", "ReadFile"].map((v) => [
+      v,
+      <Badge variant="info">{v}</Badge>,
+    ])
+  ),
+  ...Object.fromEntries(
+    ["HeapCreate", "HeapDestroy", "HeapFree"].map((v) => [
+      v,
+      <Badge variant="info">{v}</Badge>,
+    ])
+  ),
+  ...Object.fromEntries(
+    [
+      "RegCreateKeyEx",
+      "RegSetValueEx",
+      "RegDeleteValue",
+      "RegCloseKey",
+      "RegOpenKeyEx",
+    ].map((v) => [v, <Badge variant="info">{v}</Badge>])
+  ),
+  ...Object.fromEntries(
+    ["socket", "bind", "send", "connect", "recv"].map((v) => [
+      v,
+      <Badge variant="info">{v}</Badge>,
+    ])
+  ),
+  memcpy: <Badge variant="info">memcpy</Badge>,
+};
 
 function OperationList(props) {
   const [ready, setReady] = useState(false);
   const bottomElement = useRef(null);
-  console.log('operation list inited')
   useEffect(() => {
     setReady(true);
   }, []);
   useEffect(() => {
-    if(bottomElement.current) { bottomElement.current.scrollIntoView({ behavior: "smooth" }) };
+    if (bottomElement.current) {
+      bottomElement.current.scrollIntoView({ behavior: "smooth" });
+    }
   }, [props.following, props.operations, props.filters, ready, props.loading]);
   const showPlaceholder = !ready || props.loading;
-  const showData = !showPlaceholder && (props.operations && props.operations != 0);
+  const showData =
+    !showPlaceholder && props.operations && props.operations != 0;
   const showText = !showPlaceholder && !showData;
+  const rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
+    const o = props.operations[index];
+    return (
+      <tr key={key} style={style}>
+        <td>{o.index}</td>
+        <td>{o.time}</td>
+        <td>{o.pid}</td>
+        <td>{typemaps[o.display.type] || o.display.type}</td>
+        <td>
+          {typeof o.display.summary == "string"
+            ? o.display.summary
+            : o.display.summary.map((s) => (
+                <OverlayTrigger
+                  placement="bottom"
+                  delay={{ show: 250, hide: 400 }}
+                  overlay={(props) => <Tooltip {...props}>{s.tooltip}</Tooltip>}
+                >
+                  <Badge bg="light" text="dark" key={s.key}>
+                    <span>{s.key}:</span>
+                    <Badge pill bg="info">
+                      {s.value}
+                    </Badge>
+                  </Badge>
+                </OverlayTrigger>
+              ))}
+        </td>
+      </tr>
+    );
+  };
+  const rowGetter = ({ index }) => {
+    const o = props.operations[index];
+    return {
+      ...o,
+      type: typemaps[o.display.type],
+      summary: o.display.summary.map((s) => (
+        <OverlayTrigger
+          placement="bottom"
+          delay={{ show: 250, hide: 400 }}
+          overlay={(props) => <Tooltip {...props}>{s.tooltip}</Tooltip>}
+        >
+          <Badge bg="light" text="dark" key={s.key}>
+            <span>{s.key}:</span>
+            <Badge pill bg="info">
+              {s.value}
+            </Badge>
+          </Badge>
+        </OverlayTrigger>
+      )),
+    };
+  };
+  // return (
+  //   <div>
+  //     <AutoSizer>
+  //       {({ height, width }) => (
+  //         <Table
+  //           width={width}
+  //           height={height}
+  //           headerHeight={20}
+  //           rowHeight={50}
+  //           rowCount={props.operations.length}
+  //           rowGetter={rowGetter}
+  //         >
+  //           {/* <Column label="ID" dataKey="index" /> */}
+  //           <Column label="Time" dataKey="time" width={300} />
+  //           <Column label="PID" dataKey="pid" width={100} />
+  //           <Column label="Type" dataKey="type" width={100} />
+  //           <Column label="Summary" dataKey="summary" width={100} />
+  //           {/* <Column width={200} label="Description" dataKey="description" /> */}
+  //         </Table>
+  //       )}
+  //     </AutoSizer>
+  //   </div>
+  // );
+  // return (
+  // <Container>
+  //   {/* <div style={{ display: "flex", flexDirection: "column" }}> */}
+  //   <Table hover>
+  //     <thead>
+  //       <tr>
+  //         <th>ID</th>
+  //         <th>Time</th>
+  //         <th>Process</th>
+  //         <th>Type</th>
+  //         <th>Summary</th>
+  //       </tr>
+  //     </thead>
+  //     <tbody>
+  //       {showPlaceholder && ListPlaceholder}
+  //       <div>
+  //       {showData && (
+  //         <AutoSizer>
+  //           {({ height, width }) => (
+  //             <List
+  //               width={width}
+  //               height={height}
+  //               rowCount={props.operations.length}
+  //               rowHeight={20}
+  //               rowRenderer={rowRenderer}
+  //             />
+  //           )}
+  //         </AutoSizer>
+  //       )}
+  //       </div>
+  //     </tbody>
+  //   </Table>
+  //   {showText && (
+  //     <div style={{ textAlign: "center" }}>No operations are recorded.</div>
+  //   )}
+  //   <div ref={bottomElement}></div>
+  // </Container>
+  // );
   return (
     <Container>
-    {/* <div style={{ display: "flex", flexDirection: "column" }}> */}
+      {/* <div style={{ display: "flex", flexDirection: "column" }}> */}
       <Table hover>
         <thead>
           <tr>
@@ -43,23 +202,39 @@ function OperationList(props) {
           </tr>
         </thead>
         <tbody>
-        {
-          showPlaceholder && ListPlaceholder
-        }
-        {
-          showData && props.operations.map((o, i) => {
-                return (
-                  <tr variant="success" key={i}>
-                    <td>{i}</td>
-                    <td>{o.time}</td>
-                    <td>{o.pid}</td>
-                    <td>{o.display.type}</td>
-                    <td>{o.display.summary}</td>
-                  </tr>
-                )
-              }
+          {showPlaceholder && ListPlaceholder}
+          {showData && props.operations.map(o => {
+            // if (o.type == 'HOOK') return [];
+            return(
+              <tr key={o.index}>
+                <td>{o.index}</td>
+                <td>{o.time}</td>
+                <td>{o.pid}</td>
+                <td>{typemaps[o.display.type] || o.display.type}</td>
+                <td>
+                  {
+                    typeof o.display.summary == "string"
+                    ? o.display.summary
+                    : o.display.summary.map((s) => [
+                      <OverlayTrigger
+                        placement="bottom"
+                        delay={{ show: 250, hide: 400 }}
+                        overlay={(props) => <Tooltip {...props}>{s.tooltip}</Tooltip>}
+                      >
+                        <Badge bg="light" text="dark" key={s.key}>
+                          <span>{s.key}:</span>
+                          <Badge pill bg="info">
+                            {s.value}
+                          </Badge>
+                        </Badge>
+                      </OverlayTrigger>,
+                      ' '
+                    ])
+                  }
+                </td>
+              </tr>
             )
-        }
+          })}
         </tbody>
       </Table>
       {showText && (

yprocmon-front/src/components/InstanceList.js

@@ -1,11 +1,14 @@
 import "./Monitor.css";
 import FileList from "../components/FileList";
-import { Button, Container, Row, Col, Offcanvas } from "react-bootstrap";
+import { Button, Container, Row, Col, Offcanvas, Tabs, Tab } from "react-bootstrap";
 import React, { useState, useEffect, useContext, useRef, useMemo } from "react";
 
 import api from "../api";
 import OperationList from "../components/OperationList";
 import AppContext, { AppProvider } from "../AppContext";
+import InstanceList from "../components/InstanceList";
+
+import { BsListNested } from 'react-icons/bs'
 
 function useInterval(callback, delay) {
   const savedCallback = useRef();
@@ -25,11 +28,10 @@ function useInterval(callback, delay) {
 }
 
 function Monitor(props) {
-  const [canvasOpen, setCanvas] = useState(false);
+  const [canvasOpen, setCanvasOpen] = useState(false);
   const [operationsLoading, setOperationsLoading] = useState(true);
-  console.log('monitor inited')
+  const [uploading, setUploading] = useState(false);
   useEffect(() => {
-    console.log('monitor rendered')
   }, [])
   const [filters, setFilters] = useState({
 
@@ -52,6 +54,13 @@ function Monitor(props) {
     setOperationsLock(false)
     setOperationsLoading(false);
   }
+  const updateInstances = async () => {
+    const payload = await api.instances()
+    dispatch({
+      type: "INSTANCES_UPDATE",
+      payload
+    });
+  }
   useEffect(() => {
     api.files().then((data) => {
       dispatch({
@@ -60,33 +69,54 @@ function Monitor(props) {
       });
     });
   }, []);
-  useInterval(updateOperations, isCapturing ? 1500 : null);
-  const canvasHide = () => {
-    setCanvas(false);
-  };
+  useInterval(() => {
+    updateOperations()
+    updateInstances()
+  }, isCapturing ? 1500 : null);
+  const onUpload = async (files) => {
+    setUploading(true);
+    await Promise.all(files.map(f => api.upload(f)))
+    api.files().then((data) => {
+      dispatch({
+        type: "FILES_UPDATE",
+        payload: data,
+      });
+      setUploading(false);
+    });
+  }
+  const onFileSelect = async (file) => {
+    await api.run(file.name, file.name);
+    await updateInstances();
+  }
   // const OperationListMemo = React.memo(OperationList);
   return (
     <>
       <Container className="app-monitor">
-        <Button
-          variant="primary"
-          onClick={() => alert(state.operations.length)}
-        >
-          Check Operations
-        </Button>
+        <div className="app-toolbar">
+          <Button
+            variant="primary"
+            onClick={() => setCanvasOpen(true)}>
+            <BsListNested />{' '}Task Manager
+          </Button>
+        </div>
         <div className="app-operation-list">
           {/* <OperationList loading={operationsLoading} operations={state.operations} /> */}
           <OperationList loading={operationsLoading} operations={state.operations} />
         </div>
       </Container>
-      <Offcanvas show={canvasOpen} onHide={canvasHide}>
+      <Offcanvas show={canvasOpen} onHide={() => setCanvasOpen(false)}>
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+          <Offcanvas.Title>Task Manager</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
-          <div className="app-file-list">
-            <FileList files={state.files} active="ymsgbox2.exe"></FileList>
-          </div>
+          <Tabs defaultActiveKey="files">
+            <Tab eventKey="files" title="Files">
+              <FileList uploading={uploading} files={state.files} active="ymsgbox2.exe" onUpload={onUpload} onSelect={onFileSelect}></FileList>
+            </Tab>
+            <Tab eventKey="instances" title="Instances">
+              <InstanceList instances={state.instances}  onSelect={f => alert(f)}></InstanceList>
+            </Tab>
+          </Tabs>
         </Offcanvas.Body>
       </Offcanvas>
     </>