adds active runs to Header, changes Layout test (#747)

web/frontend/src/components/Header/Header.js

@@ -1,29 +1,83 @@
 import "./header.css";
 
-import { Col, Row, Space } from "antd";
+import { Col, Descriptions, Row, Space, Tooltip, Typography } from "antd";
+import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 
+import { RunningContext } from "../../context/Running/RunningContext";
 import Logo from "../layout/Logo";
 import Profile from "./Profile";
 
-const Header = () => (
-  <header>
-    <Row>
-      <Col flex="auto">
-        <Space size={24}>
-          <Link to="/">
-            <Logo />
-          </Link>
-          <Link to="/history">History</Link>
-          <Link to="/tests">Tests</Link>
-          <Link to="/agents">Agents</Link>
-        </Space>
-      </Col>
-      <Col style={{ marginLeft: "auto", display: "flex" }}>
-        <Profile />
-      </Col>
-    </Row>
-  </header>
-);
+const { Text } = Typography;
+
+const Header = () => {
+  const { runs } = useContext(RunningContext);
+
+  const activeRunNames = runs ? runs.map((run) => run.title) : [];
+
+  return (
+    <header>
+      <Row>
+        <Col flex="auto">
+          <Space size={24}>
+            <Link to="/">
+              <Logo />
+            </Link>
+            <Link to="/history">History</Link>
+            <Link to="/tests">Tests</Link>
+            <Link to="/agents">Agents</Link>
+          </Space>
+        </Col>
+        <Col style={{ display: "flex", alignItems: "center" }}>
+          {runs && runs.length > 0 && (
+            <Tooltip
+              title={
+                <div>
+                  {activeRunNames.map((name, index) => (
+                    <div key={index}>{name}</div>
+                  ))}
+                </div>
+              }
+              placement="bottom"
+              trigger="hover"
+            >
+              <Link to="/">
+                <div
+                  style={{
+                    paddingTop: "5px",
+                    marginRight: "15px",
+                    cursor: "pointer",
+                    display: "inline-block"
+                  }}
+                >
+                  <Descriptions
+                    size="small"
+                    bordered
+                    labelStyle={{
+                      borderTopLeftRadius: "20px",
+                      borderBottomLeftRadius: "20px",
+                      borderColor: "#d6d6d6",
+                      background: "white"
+                    }}
+                    contentStyle={{
+                      borderTopRightRadius: "20px",
+                      borderBottomRightRadius: "20px",
+                      background: "#d9f7be"
+                    }}
+                  >
+                    <Descriptions.Item label="Active Runs">
+                      <Text strong>{runs.length}</Text>
+                    </Descriptions.Item>
+                  </Descriptions>
+                </div>
+              </Link>
+            </Tooltip>
+          )}
+          <Profile />
+        </Col>
+      </Row>
+    </header>
+  );
+};
 
 export default Header;

web/frontend/src/components/Header/header.css

@@ -5,3 +5,13 @@ header {
 .ant-menu-horizontal {
   border-bottom: 1px solid transparent;
 }
+
+.ant-descriptions-bordered .ant-descriptions-view {
+  border-color: #d6d6d6;
+  border-radius: 20px;
+}
+
+.ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label, .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content {
+  padding: 4px 12px;
+  border-color: solid #f0f0f0;
+}

web/frontend/src/pages/Layout/Layout.test.js

@@ -3,6 +3,7 @@ import React from "react";
 import { MemoryRouter } from "react-router-dom";
 
 import { CurrentWorkspaceContext } from "../../context/CurrentWorkspace";
+import { RunningContext } from "../../context/Running";
 import { UserContext } from "../../context/User";
 import Layout from "./Layout";
 
@@ -23,15 +24,27 @@ describe("pages/Layout", () => {
         name: "workspace-2"
       }
     ];
+    const runs = [
+      {
+        id: "run-id",
+        title: "run-title"
+      },
+      {
+        id: "run-id2",
+        title: "run-title2"
+      }
+    ];
 
     const rendered = render(
       <UserContext.Provider value={{ user, workspaces }}>
         <CurrentWorkspaceContext.Provider
           value={{ currentWorkspace: workspaces[0] }}
         >
-          <MemoryRouter initialEntries={["/"]}>
-            <Layout />
-          </MemoryRouter>
+          <RunningContext.Provider value={{ runs }}>
+            <MemoryRouter initialEntries={["/"]}>
+              <Layout />
+            </MemoryRouter>
+          </RunningContext.Provider>
         </CurrentWorkspaceContext.Provider>
       </UserContext.Provider>
     );