feat: fetch runs based on workspace (#300)

* feat: add /users page * fix: snapshot for last login at * feat: add current workspace context * feat: fetch runs based on workspace * fix: linting
Farfetch · Mar 23, 2022 · 9492271 · 9492271
1 parent 650f1fb
commit 9492271
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 31 deletions.
diff --git a/web/frontend/src/components/Dashboard/RunsMonitor/RunsMonitor.js b/web/frontend/src/components/Dashboard/RunsMonitor/RunsMonitor.js
@@ -1,12 +1,14 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
+import { CurrentWorkspaceContext } from "../../../context/CurrentWorkspace";
 import { fetchRuns } from "../../../lib/api/endpoints/run";
 import { runStatus as runStatusModel } from "../../../lib/api/models";
 
 const RunsMonitor = ({ children }) => {
   const [isIntervalLoading, setIsIntervalLoading] = useState(false);
   const [runs, setRuns] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const { currentWorkspace } = useContext(CurrentWorkspaceContext);
 
   const updateRunsInterval = 5000;
 
@@ -17,7 +19,7 @@ const RunsMonitor = ({ children }) => {
       runStatusModel.RUNNING
     ];
 
-    const runsData = await fetchRuns();
+    const runsData = await fetchRuns({ workspaceId: currentWorkspace.id });
     const runningStatusRuns = runsData.filter((run) =>
       availableRunStatuses.includes(run.runStatus)
     );
@@ -42,7 +44,8 @@ const RunsMonitor = ({ children }) => {
     }, updateRunsInterval);
 
     return () => clearInterval(interval);
-  }, [isIntervalLoading]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIntervalLoading, currentWorkspace]);
 
   // The function is executed only first time to make page load
   useEffect(() => {
@@ -53,6 +56,7 @@ const RunsMonitor = ({ children }) => {
     };
 
     loadRunsData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return children({ isLoading, runs });

diff --git a/web/frontend/src/components/Header/Profile/Profile.js b/web/frontend/src/components/Header/Profile/Profile.js
@@ -5,20 +5,36 @@ import {
 } from "@ant-design/icons";
 import { Dropdown, Menu, Select, Space } from "antd";
 import { useContext } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { CurrentWorkspaceContext } from "../../../context/CurrentWorkspace";
 import { UserContext } from "../../../context/User";
 import { userRole as userRoleModel } from "../../../lib/api/models";
-import { logoutUrl, usersUrl, workspacesUrl } from "../../../lib/routes";
+import {
+  historyUrl,
+  homeUrl,
+  logoutUrl,
+  testsUrl,
+  usersUrl,
+  workspacesUrl
+} from "../../../lib/routes";
 import Avatar from "../../layout/Avatar";
 
 const Profile = () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
   const { user, workspaces } = useContext(UserContext);
   const { currentWorkspace, setCurrentWorkspace } = useContext(
     CurrentWorkspaceContext
   );
 
+  const onWorkspaceChange = (workspaceId) => {
+    if (![testsUrl, historyUrl, homeUrl].includes(pathname))
+      navigate(historyUrl);
+    const workspace = workspaces.find(({ id }) => id === workspaceId);
+    setCurrentWorkspace(workspace);
+  };
+
   const menu = (
     <Menu>
       <Menu.Item key="me" disabled>
@@ -44,7 +60,7 @@ const Profile = () => {
     <Space align="center">
       <Select
         style={{ width: 240 }}
-        onChange={(workspaceId) => setCurrentWorkspace(workspaceId)}
+        onChange={onWorkspaceChange}
         defaultValue={currentWorkspace.id}
       >
         {workspaces.map((workspace) => (

diff --git a/web/frontend/src/components/Header/Profile/Profile.test.js b/web/frontend/src/components/Header/Profile/Profile.test.js
@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
 import React from "react";
+import { MemoryRouter } from "react-router-dom";
 
 import { CurrentWorkspaceContext } from "../../../context/CurrentWorkspace";
 import { UserContext } from "../../../context/User";
@@ -29,7 +30,9 @@ describe("components/Header/Profile", () => {
         <CurrentWorkspaceContext.Provider
           value={{ currentWorkspace: workspaces[0] }}
         >
-          <Profile />
+          <MemoryRouter initialEntries={["/"]}>
+            <Profile />
+          </MemoryRouter>
         </CurrentWorkspaceContext.Provider>
       </UserContext.Provider>
     );

diff --git a/web/frontend/src/components/RunConfiguration/Form/RunConfigurationForm.js b/web/frontend/src/components/RunConfiguration/Form/RunConfigurationForm.js
@@ -2,8 +2,10 @@
 import { Button, Card, Col, Form, message, Row, Typography } from "antd";
 import moment from "moment";
 import PropTypes from "prop-types";
+import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { CurrentWorkspaceContext } from "../../../context/CurrentWorkspace";
 import { createRun, startRun } from "../../../lib/api/endpoints/run";
 import { colors } from "../../../lib/colors";
 import { toUtcHourMinute } from "../../../lib/date";
@@ -29,6 +31,7 @@ const RunConfigurationForm = ({
   initialValues,
   agents
 }) => {
+  const { currentWorkspace } = useContext(CurrentWorkspaceContext);
   const navigate = useNavigate();
   const [form] = Form.useForm();
 
@@ -65,7 +68,8 @@ const RunConfigurationForm = ({
       customDataIds,
       customProperties,
       loadProfile,
-      isScheduleEnabled
+      isScheduleEnabled,
+      workspaceId: currentWorkspace.id
     };
 
     if (isScheduleEnabled) {

diff --git a/web/frontend/src/lib/api/endpoints/run.js b/web/frontend/src/lib/api/endpoints/run.js
@@ -73,8 +73,13 @@ export const restartRun = async (runId) => {
   return run;
 };
 
-export const fetchRuns = async () => {
-  const res = await maestroClient.get(`/api/runs`);
+export const fetchRuns = async (filters = {}) => {
+  const params = {
+    params: {
+      ...(filters.workspaceId ? { workspace_id: filters.workspaceId } : {})
+    }
+  };
+  const res = await maestroClient.get(`/api/runs`, params);
 
   const runs = res.data.map(runObjectMapper);
 

diff --git a/web/frontend/src/lib/api/endpoints/runConfiguration.js b/web/frontend/src/lib/api/endpoints/runConfiguration.js
@@ -20,6 +20,7 @@ const runConfigurationObjectMapper = (runConfiguration) => ({
 /**
  *
  * @param {String} runPlanId  ID from RunPlan collection
+ * @param {String} workspaceId  Workspace ID
  * @param {Array} hosts  list of objects: {host: String, ip: String}
  * @param {Array} agentIds  List of Ids from Agent collection
  * @param {Array} customDataIds  List of Ids from CustomData collection
@@ -33,6 +34,7 @@ export const createRunConfiguration = async ({
   title,
   labels,
   runPlanId,
+  workspaceId,
   hosts,
   agentIds,
   customDataIds,
@@ -45,6 +47,7 @@ export const createRunConfiguration = async ({
     title,
     labels,
     run_plan_id: runPlanId,
+    workspace_id: workspaceId,
     agent_ids: agentIds,
     custom_data_ids: customDataIds,
     custom_properties: customProperties,
@@ -62,6 +65,7 @@ export const createRunConfiguration = async ({
 /**
  *
  * @param {String} runPlanId  ID from RunPlan collection
+ * @param {String} workspaceId  Workspace ID
  * @param {Array} hosts  list of objects: {host: String, ip: String}
  * @param {Array} agentIds  List of Ids from Agent collection
  * @param {Array} customDataIds  List of Ids from CustomData collection
@@ -77,6 +81,7 @@ export const updateRunConfiguration = async (
     title,
     labels,
     runPlanId,
+    workspaceId,
     hosts,
     agentIds,
     customDataIds,
@@ -92,6 +97,7 @@ export const updateRunConfiguration = async (
       title,
       labels,
       run_plan_id: runPlanId,
+      workspace_id: workspaceId,
       agent_ids: agentIds,
       custom_data_ids: customDataIds,
       custom_properties: customProperties,
@@ -126,8 +132,13 @@ export const fetchRunConfigurationById = async (runConfigurationId) => {
  *
  * @returns  [] runConfiguration
  */
-export const fetchRunConfigurations = async () => {
-  const res = await maestroClient.get("/api/run_configurations");
+export const fetchRunConfigurations = async (filters = {}) => {
+  const params = {
+    params: {
+      ...(filters.workspaceId ? { workspace_id: filters.workspaceId } : {})
+    }
+  };
+  const res = await maestroClient.get("/api/run_configurations", params);
 
   const runConfigurations = res.data.map(runConfigurationObjectMapper);
 

diff --git a/web/frontend/src/lib/routes.js b/web/frontend/src/lib/routes.js
@@ -22,8 +22,14 @@ export const agentLogsUrl = (runConfigurationId) =>
 
 export const runSingleUrl = (runId) => `/run/${runId}`;
 
+export const homeUrl = "/";
+
+export const testsUrl = "/tests";
+
 export const historyUrl = "/history";
 
 export const logoutUrl = `${maestroApiUrl}/logout`;
+
 export const workspacesUrl = "/workspaces";
+
 export const usersUrl = "/users";
diff --git a/web/frontend/src/pages/History.js b/web/frontend/src/pages/History.js
@@ -1,27 +1,28 @@
 import { Col, Row } from "antd";
-import React, { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
 import PageTitle from "../components/layout/PageTitle";
 import RunListTable from "../components/Run/ListTable";
+import { CurrentWorkspaceContext } from "../context/CurrentWorkspace";
 import { fetchRuns } from "../lib/api/endpoints/run";
 
 const HistoryPage = () => {
   const [runs, setRuns] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const { currentWorkspace } = useContext(CurrentWorkspaceContext);
 
-  const updateRunPlans = async () => {
-    setIsLoading(true);
-
-    const runsRes = await fetchRuns();
+  useEffect(() => {
+    const updateRunPlans = async () => {
+      setIsLoading(true);
 
-    setRuns(runsRes);
+      const runsRes = await fetchRuns({ workspaceId: currentWorkspace.id });
 
-    setIsLoading(false);
-  };
+      setRuns(runsRes);
 
-  useEffect(() => {
+      setIsLoading(false);
+    };
     updateRunPlans();
-  }, []);
+  }, [currentWorkspace]);
 
   return (
     <>

diff --git a/web/frontend/src/pages/Tests.js b/web/frontend/src/pages/Tests.js
@@ -1,29 +1,33 @@
 import { Button, Col, Row } from "antd";
-import React, { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import PageTitle from "../components/layout/PageTitle";
 import RunConfigurationTable from "../components/RunConfiguration/Table";
+import { CurrentWorkspaceContext } from "../context/CurrentWorkspace";
 import { fetchRunConfigurations } from "../lib/api/endpoints/runConfiguration";
 import { testNewUrl } from "../lib/routes";
 
 const TestsPage = () => {
   const [runConfigurations, setRunConfigurations] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const { currentWorkspace } = useContext(CurrentWorkspaceContext);
 
-  const updateRunConfigurations = async () => {
-    setIsLoading(true);
+  useEffect(() => {
+    const updateRunConfigurations = async () => {
+      setIsLoading(true);
 
-    const runConfigurationsRes = await fetchRunConfigurations();
+      const runConfigurationsRes = await fetchRunConfigurations({
+        workspaceId: currentWorkspace.id
+      });
 
-    setRunConfigurations(runConfigurationsRes);
+      setRunConfigurations(runConfigurationsRes);
 
-    setIsLoading(false);
-  };
+      setIsLoading(false);
+    };
 
-  useEffect(() => {
     updateRunConfigurations();
-  }, []);
+  }, [currentWorkspace]);
 
   return (
     <>