feat(workflow-badges): add Dask dashboard icon (#417)

Closes #415

Author: Alputer

reana-ui/src/client.js

@@ -56,6 +56,8 @@ export const INTERACTIVE_SESSIONS_CLOSE_URL = (id) =>
   `${api}/api/workflows/${id}/close/`;
 export const INTERACTIVE_SESSION_URL = (sessionUri, reanaToken) =>
   `${api}${sessionUri}?token=${reanaToken}`;
+export const DASK_DASHBOARD_URL = (workflow_id) =>
+  `${api}/${workflow_id}/dashboard/status`;
 export const LAUNCH_ON_REANA_URL = `${api}/api/launch`;
 
 class Client {

reana-ui/src/components/DaskIcon.js

@@ -0,0 +1,61 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2024 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 PropTypes from "prop-types";
+
+import styles from "./DaskIcon.module.scss";
+
+const DaskIcon = ({ size, className }) => {
+  // Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)
+  return (
+    <svg
+      className={className || styles.icon}
+      viewBox="0 0 512 512"
+      width={`${size}px`}
+      height={`${size}px`}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g>
+        <path
+          fill="#FFC11E"
+          d="M143.71,157.61l126.5-72.99c1.25-0.72,2.02-2.05,2.02-3.5l0.01-43.77c0-6.48-2.66-12.9-7.83-16.81
+		c-6.69-5.06-15.28-5.56-22.33-1.48L65.13,121.17c-6.22,3.59-10.06,10.23-10.06,17.41L55,369.18c0,6.47,2.65,12.89,7.81,16.81
+		c6.68,5.07,15.29,5.57,22.35,1.49l37.48-21.62c1.25-0.72,2.02-2.05,2.02-3.5l0.05-171.85C124.71,176.93,131.95,164.4,143.71,157.61
+		z"
+        />
+        <path
+          fill="#EF1161"
+          d="M446.95,124.53c-3.15-1.82-6.61-2.73-10.06-2.73c-3.45,0-6.9,0.91-10.05,2.73l-176.96,102.1
+		c-6.2,3.58-10.06,10.25-10.06,17.41l-0.07,231.47c0,7.27,3.76,13.78,10.05,17.42c6.3,3.64,13.81,3.64,20.11,0l176.95-102.11
+		c6.2-3.58,10.06-10.25,10.06-17.41L457,141.95C457,134.68,453.24,128.16,446.95,124.53z"
+        />
+        <path
+          fill="#FC6E6B"
+          d="M240.95,211.14l116.78-67.38c1.25-0.72,2.02-2.05,2.02-3.5l0.02-50.98c0-6.48-2.66-12.9-7.83-16.81
+		c-6.69-5.06-15.27-5.55-22.33-1.48l-48.43,27.95L152.64,173.1c-6.22,3.59-10.06,10.23-10.06,17.41l-0.05,174.18l-0.02,56.41
+		c0,6.48,2.65,12.89,7.81,16.81c6.69,5.07,15.29,5.57,22.35,1.49l47.2-27.24c1.25-0.72,2.02-2.05,2.02-3.5l0.05-164.64
+		C221.95,230.46,229.19,217.92,240.95,211.14z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+DaskIcon.defaultProps = {
+  size: 22,
+  className: "",
+};
+
+DaskIcon.propTypes = {
+  size: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export default DaskIcon;

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

@@ -0,0 +1,16 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2024 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/WorkflowBadges.js

@@ -10,8 +10,8 @@
 
 import styles from "./WorkflowBadges.module.scss";
 import { Label, Popup } from "semantic-ui-react";
-import { JupyterNotebookIcon } from "~/components";
-import { INTERACTIVE_SESSION_URL } from "~/client";
+import { JupyterNotebookIcon, DaskIcon } from "~/components";
+import { INTERACTIVE_SESSION_URL, DASK_DASHBOARD_URL } from "~/client";
 import { LauncherLabel } from "~/components";
 import { getReanaToken, getUserEmail } from "~/selectors";
 import { useSelector } from "react-redux";
@@ -22,11 +22,14 @@ export default function WorkflowBadges({ workflow }) {
   const {
     size,
     launcherURL,
+    services,
     session_uri: sessionUri,
     session_status: sessionStatus,
   } = workflow;
   const hasDiskUsage = size.raw > 0;
   const isSessionOpen = sessionStatus === "running";
+  const isDaskClusterUp =
+    services.length > 0 && services[0].status === "running";
 
   return (
     <div className={styles.badgesContainer}>
@@ -64,6 +67,21 @@ export default function WorkflowBadges({ workflow }) {
               rel="noopener noreferrer"
             />
           )}
+          {isDaskClusterUp && (
+            <Label
+              size="tiny"
+              content={"Dashboard"}
+              icon={
+                <i className="icon">
+                  <DaskIcon size={12} />
+                </i>
+              }
+              as="a"
+              href={DASK_DASHBOARD_URL(workflow.id)}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          )}
         </>
       )}
       {workflow.ownerEmail !== userEmail && (

reana-ui/src/components/index.js

@@ -17,6 +17,7 @@ export { default as Title } from "./Title";
 export { default as TopHeader } from "./TopHeader";
 export { default as TooltipIfTruncated } from "./TooltipIfTruncated";
 export { default as LauncherLabel } from "./LauncherLabel";
+export { default as DaskIcon } from "./DaskIcon";
 export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";
 export { default as WorkflowDeleteModal } from "./WorkflowDeleteModal";
 export { default as WorkflowInfo } from "./WorkflowInfo";