feat(workflow-details): add service logs tab (#426)

Closes reanahub/reana#880
Closes reanahub/reana-workflow-controller#627

Author: Alputer

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

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022, 2023, 2024 CERN.
+  Copyright (C) 2020, 2022, 2023, 2024, 2025 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.
@@ -115,6 +115,14 @@ export default function WorkflowDetails() {
       menuItem: { key: "job-logs", icon: "terminal", content: "Job logs" },
       render: () => <WorkflowLogs workflow={workflow} />,
     },
+    {
+      menuItem: {
+        key: "service-logs",
+        icon: "cloud",
+        content: "Service logs",
+      },
+      render: () => <WorkflowLogs service workflow={workflow} />,
+    },
     {
       menuItem: {
         key: "workspace",

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

@@ -2,7 +2,7 @@
 	-*- coding: utf-8 -*-
 
 	This file is part of REANA.
-	Copyright (C) 2020, 2022 CERN.
+	Copyright (C) 2020, 2022, 2025 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.
@@ -46,6 +46,79 @@ EngineLogs.propTypes = {
   workflowStatus: PropTypes.string.isRequired,
 };
 
+// The ui currently handles only Dask service logs, but this component can be extended to handle other services in the future.
+// UI design should be changed to allow for multiple services to be displayed at once if another service is introduced.
+function ServiceLogs({ isDask, components, workflowStatus }) {
+  const isExecuting = NON_FINISHED_STATUSES.includes(workflowStatus);
+  const [selectedComponentIndex, setSelectedComponentIndex] = useState("0");
+
+  if (!isDask) {
+    return (
+      <Message
+        icon="info circle"
+        content={
+          "The service logs are only available for Dask workflows at the moment."
+        }
+        info
+      />
+    );
+  }
+
+  if (isExecuting) {
+    return (
+      <Message
+        icon="info circle"
+        content={
+          "The service logs will be available after the workflow run finishes."
+        }
+        info
+      />
+    );
+  }
+
+  const dropdownOptions = Object.entries(components).map(([id, component]) => ({
+    key: id,
+    text: component.component,
+    icon: {
+      name: "dot circle outline",
+      size: "small",
+      color: "green",
+    },
+    value: id,
+  }));
+
+  return (
+    <>
+      <section className={styles["step-info"]}>
+        <div className={styles["step-dropdown"]}>
+          <Label size="large" className={styles["step-label"]}>
+            Component
+          </Label>
+          <Dropdown
+            placeholder="Select a component"
+            search
+            selection
+            options={dropdownOptions}
+            value={selectedComponentIndex}
+            onChange={(_, { value }) => setSelectedComponentIndex(value)}
+            className={styles.dropdown}
+          />
+        </div>
+      </section>
+      {selectedComponentIndex && (
+        <CodeSnippet dollarPrefix={false} classes={styles.logs}>
+          {components[selectedComponentIndex].content}
+        </CodeSnippet>
+      )}
+    </>
+  );
+}
+
+ServiceLogs.propTypes = {
+  components: PropTypes.array.isRequired,
+  workflowStatus: PropTypes.string.isRequired,
+};
+
 function JobLogs({ logs }) {
   function chooseLastStepID(logs) {
     const failedStepId = findKey(logs, (log) => log.status === "failed");
@@ -141,12 +214,18 @@ JobLogs.propTypes = {
   logs: PropTypes.object.isRequired,
 };
 
-export default function WorkflowLogs({ workflow, engine = false }) {
+export default function WorkflowLogs({
+  workflow,
+  engine = false,
+  service = false,
+}) {
   const dispatch = useDispatch();
   const loading = useSelector(loadingDetails);
-  const { engineLogs = "", jobLogs = {} } = useSelector(
-    getWorkflowLogs(workflow.id),
-  );
+  const {
+    engineLogs = "",
+    jobLogs = {},
+    serviceLogs = {},
+  } = useSelector(getWorkflowLogs(workflow.id));
 
   useEffect(() => {
     dispatch(fetchWorkflowLogs(workflow.id));
@@ -156,6 +235,16 @@ export default function WorkflowLogs({ workflow, engine = false }) {
     <Loader active inline="centered" />
   ) : engine ? (
     <EngineLogs workflowStatus={workflow.status} logs={engineLogs} />
+  ) : service ? (
+    <ServiceLogs
+      isDask={workflow.services.length > 0}
+      workflowStatus={workflow.status}
+      components={
+        Object.keys(serviceLogs).length === 0
+          ? []
+          : Object.values(serviceLogs)[0]
+      }
+    />
   ) : (
     <JobLogs logs={jobLogs} />
   );
@@ -164,4 +253,5 @@ export default function WorkflowLogs({ workflow, engine = false }) {
 WorkflowLogs.propTypes = {
   workflow: PropTypes.object.isRequired,
   engine: PropTypes.bool,
+  service: PropTypes.bool,
 };

reana-ui/src/util.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022, 2023 CERN.
+  Copyright (C) 2020, 2022, 2023, 2025 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.
@@ -215,10 +215,10 @@ export function parseLogs(logs) {
       );
     }
   }
-
   return {
     jobLogs: parsedLogs.job_logs,
     engineLogs: parsedLogs.workflow_logs,
+    serviceLogs: parsedLogs.service_logs,
   };
 }