ui: add way to open, list and close interactive sessions

closes #77

reana-ui/src/actions.js

@@ -62,6 +62,9 @@ export const WORKFLOW_SPECIFICATION_RECEIVED =
   "Workflow specification received";
 export const WORKFLOW_DELETE_INIT = "Initialize workflow deletion";
 export const WORKFLOW_DELETED = "Workflow deleted";
+export const OPEN_DELETE_WORKFLOW_MODAL = "Open delete workflow modal";
+export const CLOSE_DELETE_WORKFLOW_MODAL = "Close delete workflow modal";
+export const WORKFLOW_LIST_REFRESH = "Refresh workflow list";
 
 const CONFIG_URL = `${api}/api/config`;
 const USER_INFO_URL = `${api}/api/you`;
@@ -70,7 +73,9 @@ const USER_SIGNIN_URL = `${api}/api/login`;
 const USER_SIGNOUT_URL = `${api}/api/logout`;
 const USER_REQUEST_TOKEN_URL = `${api}/api/token`;
 const WORKFLOWS_URL = (params) =>
-  `${api}/api/workflows?verbose=true&${stringifyQueryParams(params)}`;
+  `${api}/api/workflows?verbose=true&type=interactive&${stringifyQueryParams(
+    params
+  )}`;
 const WORKFLOW_LOGS_URL = (id) => `${api}/api/workflows/${id}/logs`;
 const WORKFLOW_SPECIFICATION_URL = (id) =>
   `${api}/api/workflows/${id}/specification`;
@@ -80,6 +85,12 @@ const WORKFLOW_FILES_URL = (id, pagination) =>
 const WORKFLOW_SET_STATUS_URL = (id, status) =>
   `${api}/api/workflows/${id}/status?${stringifyQueryParams(status)}`;
 
+const INTERACTIVE_SESSIONS_OPEN_URL = (id, type = "jupyter") =>
+  `${api}/api/workflows/${id}/open/${type}`;
+
+const INTERACTIVE_SESSIONS_CLOSE_URL = (id) =>
+  `${api}/api/workflows/${id}/close/`;
+
 function errorActionCreator(error, name) {
   const { status, data } = error?.response;
   const { message } = data;
@@ -334,6 +345,7 @@ export function deleteWorkflow(id, workspace = false) {
       )
       .then((resp) => {
         dispatch({ type: WORKFLOW_DELETED, ...resp.data });
+        dispatch({ type: WORKFLOW_LIST_REFRESH });
         dispatch(triggerNotification("Success!", resp.data.message));
       })
       .catch((err) => {
@@ -346,3 +358,44 @@ export function deleteWorkflow(id, workspace = false) {
       });
   };
 }
+
+export function openDeleteWorkflowModal(workflow) {
+  return { type: OPEN_DELETE_WORKFLOW_MODAL, workflow };
+}
+
+export function closeDeleteWorkflowModal() {
+  return { type: CLOSE_DELETE_WORKFLOW_MODAL };
+}
+
+export function openInteractiveSession(id) {
+  return async (dispatch) => {
+    return await axios
+      .post(INTERACTIVE_SESSIONS_OPEN_URL(id), null, { withCredentials: true })
+      .then((resp) => {
+        dispatch({ type: WORKFLOW_LIST_REFRESH });
+        dispatch(
+          triggerNotification(
+            "Success!",
+            "The interactive session has been created. However, it could take several minutes to start the Jupyter Notebook."
+          )
+        );
+      })
+      .catch((err) => {
+        dispatch(errorActionCreator(err, INTERACTIVE_SESSIONS_OPEN_URL(id)));
+      });
+  };
+}
+
+export function closeInteractiveSession(id) {
+  return async (dispatch) => {
+    return await axios
+      .post(INTERACTIVE_SESSIONS_CLOSE_URL(id), null, { withCredentials: true })
+      .then((resp) => {
+        dispatch({ type: WORKFLOW_LIST_REFRESH });
+        dispatch(triggerNotification("Success!", resp.data.message));
+      })
+      .catch((err) => {
+        dispatch(errorActionCreator(err, INTERACTIVE_SESSIONS_CLOSE_URL(id)));
+      });
+  };
+}

reana-ui/src/components/JupyterNotebookIcon.module.scss

@@ -0,0 +1,16 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2020 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+
+@import "@palette";
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}

reana-ui/src/components/index.js

@@ -16,3 +16,4 @@ export { default as Pagination } from "./Pagination";
 export { default as Title } from "./Title";
 export { default as TopHeader } from "./TopHeader";
 export { default as TooltipIfTruncated } from "./TooltipIfTruncated";
+export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";

reana-ui/src/pages/workflowDetails/WorkflowDetails.js

@@ -23,6 +23,7 @@ import {
   WorkflowFiles,
   WorkflowSpecification,
 } from "./components";
+import { WorkflowDeleteModal } from "../workflowList/components";
 
 export default function WorkflowDetailsPage() {
   return (
@@ -91,6 +92,7 @@ function WorkflowDetails() {
     <Container>
       <WorkflowInfo workflow={workflow} />
       <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+      <WorkflowDeleteModal />
     </Container>
   );
 }

reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js

@@ -14,7 +14,7 @@ import { Icon, Popup } from "semantic-ui-react";
 
 import { statusMapping } from "~/util";
 import { WorkflowProgress } from "../components";
-
+import { WorkflowActionsPopup } from "../../workflowList/components";
 import styles from "./WorkflowInfo.module.scss";
 
 const NON_FINISHED_STATUSES = ["created", "queued", "running"];
@@ -63,23 +63,27 @@ export default function WorkflowInfo({ workflow }) {
             }
           />
         </div>
-        <div>
-          <span
-            className={`${styles["status"]} sui-${statusMapping[status].color}`}
-          >
-            {status}
-          </span>{" "}
-          {statusMapping[status].preposition} {status !== "deleted" && duration}
-          {NON_FINISHED_STATUSES.includes(status) && (
-            <Icon
-              name="refresh"
-              className={styles.refresh}
-              onClick={() => window.location.reload()}
-            />
-          )}
+        <div className={styles.info}>
           <div>
-            step {completed}/{total}
+            <span
+              className={`${styles["status"]} sui-${statusMapping[status].color}`}
+            >
+              {status}
+            </span>{" "}
+            {statusMapping[status].preposition}{" "}
+            {status !== "deleted" && duration}
+            {NON_FINISHED_STATUSES.includes(status) && (
+              <Icon
+                name="refresh"
+                className={styles.refresh}
+                onClick={() => window.location.reload()}
+              />
+            )}
+            <div>
+              step {completed}/{total}
+            </div>
           </div>
+          <WorkflowActionsPopup workflow={workflow} />
         </div>
       </section>
       <WorkflowProgress workflow={workflow} />

reana-ui/src/pages/workflowList/WorkflowList.js

@@ -22,6 +22,7 @@ import {
   getWorkflowsCount,
   loadingWorkflows,
   userHasWorkflows,
+  getWorkflowRefresh,
 } from "~/selectors";
 import BasePage from "../BasePage";
 import { Title } from "~/components";
@@ -55,10 +56,13 @@ function Workflows() {
   const workflows = useSelector(getWorkflows);
   const workflowsCount = useSelector(getWorkflowsCount);
   const hasUserWorkflows = useSelector(userHasWorkflows);
+  const workflowRefresh = useSelector(getWorkflowRefresh);
   const loading = useSelector(loadingWorkflows);
   const reanaToken = useSelector(getReanaToken);
   const interval = useRef(null);
 
+  useEffect(() => cleanPolling(), [workflowRefresh]);
+
   useEffect(() => {
     dispatch(
       fetchWorkflows({ ...pagination }, searchFilter, statusFilter, sortDir)
@@ -88,6 +92,7 @@ function Workflows() {
     searchFilter,
     statusFilter,
     sortDir,
+    workflowRefresh,
   ]);
 
   const cleanPolling = () => {