UI to interact with Relay server (#3484)

* PBENCH-1141

Create UI to interact with the relay server pull API

dashboard/src/App.js

@@ -11,6 +11,7 @@ import {
   Routes,
 } from "react-router-dom";
 import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
 import { AuthForm } from "modules/components/AuthComponent/common-components";
 import AuthLayout from "modules/containers/AuthLayout";
@@ -20,13 +21,12 @@ import MainLayout from "modules/containers/MainLayout";
 import NoMatchingPage from "modules/components/EmptyPageComponent/NoMatchingPage";
 import OverviewComponent from "modules/components/OverviewComponent";
 import ProfileComponent from "modules/components/ProfileComponent";
+import { ReactKeycloakProvider } from "@react-keycloak/web";
 import TableOfContent from "modules/components/TableOfContent";
 import TableWithFavorite from "modules/components/TableComponent";
 import favicon from "./assets/logo/favicon.ico";
 import { fetchEndpoints } from "./actions/endpointAction";
 import { showToast } from "actions/toastActions";
-import { useDispatch, useSelector } from "react-redux";
-import { ReactKeycloakProvider } from "@react-keycloak/web";
 
 const ProtectedRoute = ({ redirectPath = APP_ROUTES.AUTH, children }) => {
   const loggedIn = Cookies.get("isLoggedIn");

dashboard/src/actions/relayActions.js

@@ -0,0 +1,42 @@
+import * as TYPES from "./types";
+
+import { DANGER, SUCCESS } from "assets/constants/toastConstants";
+
+import API from "../utils/axiosInstance";
+import { getDatasets } from "./overviewActions";
+import { showToast } from "./toastActions";
+import { uriTemplate } from "../utils/helper";
+
+export const uploadFile = (fileURI) => async (dispatch, getState) => {
+  try {
+    dispatch({ type: TYPES.LOADING });
+    const endpoints = getState().apiEndpoint.endpoints;
+
+    const uri = uriTemplate(endpoints, "relay", { uri: fileURI });
+    const response = await API.post(uri, null, null);
+    if (response.status >= 200 && response.status < 300) {
+      dispatch(showToast(SUCCESS, response.data.message));
+      dispatch(setRelayModalState(false));
+      dispatch(handleInputChange(""));
+      if (response.status === 201) {
+        // need to remove once response returns the uploaded dataset
+        dispatch(getDatasets());
+      }
+    }
+  } catch (error) {
+    dispatch(
+      showToast(DANGER, error?.response?.data?.message ?? `Error: ${error}`)
+    );
+    dispatch({ type: TYPES.NETWORK_ERROR });
+  }
+  dispatch({ type: TYPES.COMPLETED });
+};
+export const setRelayModalState = (isOpen) => ({
+  type: TYPES.TOGGLE_RELAY_MODAL,
+  payload: isOpen,
+});
+
+export const handleInputChange = (value) => ({
+  type: TYPES.SET_RELAY_DATA,
+  payload: value,
+});

dashboard/src/actions/types.js

@@ -40,6 +40,8 @@ export const EXPIRING_RUNS = "EXPIRING_RUNS";
 export const SET_DASHBOARD_LOADING = "SET_DASHBOARD_LOADING";
 export const SET_LOADING_FLAG = "SET_LOADING_FLAG";
 export const SELECTED_SAVED_RUNS = "SELECTED_SAVED_RUNS";
+export const TOGGLE_RELAY_MODAL = "TOGGLE_RELAY_MODAL";
+export const SET_RELAY_DATA = "SET_RELAY_DATA";
 
 /* TABLE OF CONTENT */
 export const GET_TOC_DATA = "GET_TOC_DATA";

dashboard/src/modules/components/OverviewComponent/common-component.jsx

@@ -33,6 +33,7 @@ import { getDatasets, updateMultipleDataset } from "actions/overviewActions";
 import { useDispatch, useSelector } from "react-redux";
 
 import { formatDateTime } from "utils/dateFunctions";
+import { setRelayModalState } from "actions/relayActions";
 
 export const Heading = (props) => {
   return (
@@ -128,6 +129,14 @@ export const NewRunsHeading = () => {
         >
           Refresh results
         </Button>
+        <Button
+          disabled={Object.keys(endpoints).length <= 0}
+          className="relay-button"
+          variant="primary"
+          onClick={() => dispatch(setRelayModalState(true))}
+        >
+          Pull dataset
+        </Button>
         <Dropdown
           onSelect={onSelect}
           toggle={

dashboard/src/modules/components/OverviewComponent/index.jsx

@@ -22,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { EmptyTable } from "../TableComponent/common-components";
 import ExpiringSoonComponent from "./ExpiringSoonComponent";
 import NewRunsComponent from "./NewRunsComponent";
+import RelayComponent from "modules/components/RelayUIComponent";
 import SavedRunsComponent from "./SavedRunsComponent";
 import { getDatasets } from "actions/overviewActions";
 
@@ -113,6 +114,7 @@ const OverviewComponent = () => {
             <Heading title="Saved Runs" />
             {savedRuns.length > 0 ? <SavedRunsComponent /> : <EmptyTable />}
           </Card>
+          <RelayComponent />
         </>
       )}
     </div>

dashboard/src/modules/components/OverviewComponent/index.less

@@ -44,6 +44,9 @@
       display: flex;
       justify-content: flex-end;
       margin-bottom: 1.5vh;
+      .relay-button {
+        margin-right: 10px;
+      }
     }
     .newruns-table-container {
       height: 90%;

dashboard/src/modules/components/RelayUIComponent/index.jsx

@@ -0,0 +1,114 @@
+import "./index.less";
+
+import {
+  ActionGroup,
+  Button,
+  Card,
+  CardBody,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  Popover,
+  TextInput,
+  Title,
+} from "@patternfly/react-core";
+import {
+  handleInputChange,
+  setRelayModalState,
+  uploadFile,
+} from "actions/relayActions";
+import { useDispatch, useSelector } from "react-redux";
+
+import { OutlinedQuestionCircleIcon } from "@patternfly/react-icons";
+import React from "react";
+
+const AboutComponent = () => (
+  <div className="about-container">
+    <p>
+      The Pbench Agent can push datasets to a Pbench Server directly, when the
+      server is accessible from the system where the Pbench Agent is being used.
+    </p>
+    <p>
+      When a firewall prevents this direct access, the Pbench Agent can store a
+      dataset tarball and a manifest file on a file relay server which can be
+      reached by both the Pbench Agent and the Pbench Server.
+    </p>
+    <p>
+      Enter the relay server URI reported by the Pbench Agent and press Submit
+      to begin the upload.
+    </p>
+  </div>
+);
+const PopoverComponent = () => (
+  <Popover
+    aria-label="Basic popover"
+    headerContent={<div>About</div>}
+    bodyContent={<AboutComponent />}
+    maxWidth="4vw"
+  >
+    <Button variant="plain" aria-label="About">
+      <OutlinedQuestionCircleIcon />
+    </Button>
+  </Popover>
+);
+
+const RelayComponent = () => {
+  const { isRelayModalOpen, relayInput } = useSelector(
+    (state) => state.overview
+  );
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(handleInputChange(""));
+    dispatch(setRelayModalState(false));
+  };
+
+  return (
+    <Modal
+      className="relay-ui-container"
+      aria-label="Relay"
+      variant={ModalVariant.small}
+      isOpen={isRelayModalOpen}
+      onClose={handleClose}
+    >
+      <div className="modal-heading">
+        <Title headingLevel="h3">Relay</Title>
+        <PopoverComponent />
+      </div>
+      <div className="card-wrapper">
+        <Card>
+          <CardBody>
+            <Form>
+              <FormGroup
+                label="Enter the Relay URI"
+                isRequired
+                fieldId="relay-uri"
+              >
+                <TextInput
+                  isRequired
+                  type="text"
+                  id="relay-uri"
+                  name="relay-uri"
+                  value={relayInput}
+                  onChange={(value) => dispatch(handleInputChange(value))}
+                />
+              </FormGroup>
+              <ActionGroup>
+                <Button
+                  variant="primary"
+                  isDisabled={!relayInput}
+                  onClick={() => dispatch(uploadFile())}
+                >
+                  Submit
+                </Button>
+              </ActionGroup>
+            </Form>
+          </CardBody>
+        </Card>
+      </div>
+    </Modal>
+  );
+};
+
+export default RelayComponent;

dashboard/src/modules/components/RelayUIComponent/index.less

@@ -0,0 +1,23 @@
+.relay-ui-container {
+  padding: 2vw;
+  .divider {
+    margin-top: 5vh;
+  }
+  .modal-heading {
+    display: flex;
+  }
+  .card-wrapper {
+    height: 45vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .pf-c-card {
+      width: 45vw;
+    }
+  }
+}
+.about-container {
+  p {
+    margin-bottom: 0.5vw;
+  }
+}

dashboard/src/reducers/overviewReducer.js

@@ -10,6 +10,8 @@ const initialState = {
   selectedSavedRuns: [],
   expiringRuns: [],
   loadingDone: !!sessionStorage.getItem("loadingDone"),
+  isRelayModalOpen: false,
+  relayInput: "",
 };
 
 const OverviewReducer = (state = initialState, action = {}) => {
@@ -60,6 +62,16 @@ const OverviewReducer = (state = initialState, action = {}) => {
         ...state,
         loadingDone: payload,
       };
+    case TYPES.TOGGLE_RELAY_MODAL:
+      return {
+        ...state,
+        isRelayModalOpen: payload,
+      };
+    case TYPES.SET_RELAY_DATA:
+      return {
+        ...state,
+        relayInput: payload,
+      };
     default:
       return state;
   }