feat: set jupyter server at first in Logs view (#1743)

client/src/notebooks/Notebooks.present.js

@@ -45,7 +45,7 @@ import { Loader } from "../utils/components/Loader";
 import { InfoAlert, } from "../utils/components/Alert";
 import { Clipboard } from "../utils/components/Clipboard";
 import LoginAlert from "../utils/components/loginAlert/LoginAlert";
-import { EnvironmentLogs, LogDownloadButton, LogTabs, useDownloadLogs } from "../utils/components/Logs";
+import { EnvironmentLogs, getLogsToShow, LogDownloadButton, LogTabs, useDownloadLogs } from "../utils/components/Logs";
 import { SessionStatus } from "../utils/constants/Notebooks";
 
 import "./Notebooks.css";
@@ -110,16 +110,23 @@ function SessionLogs(props) {
       );
     }
     else {
-      if (logs.data && typeof logs.data !== "string") {
-        body = <LogTabs logs={logs.data}/>;
+      const logsWithData = getLogsToShow(logs);
+      if (logs.data && typeof logs.data !== "string" && Object.keys(logsWithData).length) {
+        body = <LogTabs logs={logsWithData}/>;
       }
       else {
         body = (
           <Fragment>
-            <p>No logs available for this pod yet.</p>
+            <p data-cy="no-logs-message">No logs available for this pod yet.</p>
             <p>
               You can try to{" "}
-              <Button className="btn-outline-rk-green" size="sm" onClick={() => { fetchLogs(); }}>refresh</Button>
+              <Button
+                data-cy="retry-logs-body"
+                className="btn-outline-rk-green"
+                size="sm"
+                onClick={() => { fetchLogs(); }}>
+                refresh
+              </Button>
               {" "}them after a while.
             </p>
           </Fragment>

client/src/utils/components/Logs.js

@@ -35,6 +35,17 @@ import {
 import { Loader } from "./Loader";
 import { capitalizeFirstLetter, generateZip } from "../helpers/HelperFunctions";
 
+function getLogsToShow(logs) {
+  const logsWithData = {};
+  if (logs.data && typeof logs.data !== "string") {
+    Object.keys(logs.data).map(key => {
+      if (logs.data[key].length > 0)
+        logsWithData[key] = logs.data[key];
+    });
+  }
+  return logsWithData;
+}
+
 function LogBody({ fetchLogs, logs, name }) {
   if (logs.fetching) return <Loader />;
 
@@ -44,8 +55,9 @@ function LogBody({ fetchLogs, logs, name }) {
     </p>;
   }
 
-  if (logs.data && typeof logs.data !== "string")
-    return <LogTabs logs={logs.data}/>;
+  const logsWithData = getLogsToShow(logs);
+  if (logs.data && typeof logs.data !== "string" && Object.keys(logsWithData).length)
+    return <LogTabs logs={logsWithData}/>;
 
   return <div>
     <p data-cy="no-logs-available">No logs available for this pod yet.</p>
@@ -57,30 +69,33 @@ function LogBody({ fetchLogs, logs, name }) {
 
 const LogTabs = ({ logs }) => {
   const [activeTab, setActiveTab] = useState(null);
+  const [data, setData] = useState(null);
 
   useEffect(() => {
     if (logs) {
-      const keys = Object.keys(logs);
-      if (keys.length && keys.includes("jupyter-server"))
-        setActiveTab("jupyter-server");
-      else if (keys.length)
+      const orderedLogs = logs && logs["jupyter-server"] ? { "jupyter-server": logs["jupyter-server"], ...logs } : logs;
+      setData(orderedLogs);
+      if (activeTab === null) {
+        const keys = Object.keys(orderedLogs);
         setActiveTab(keys[0]);
+      }
     }
-  }, [logs]);
+  }, [logs, activeTab]);
+
 
   const getTitle = (name) => {
     return name.split("-").map(word => capitalizeFirstLetter(word)).join(" ");
   };
 
-  if (!logs)
+  if (!data)
     return null;
 
   return (
     <div>
       <Nav pills className="nav-pills-underline">
-        { Object.keys(logs).map( tab => {
+        { Object.keys(data).map( tab => {
           return (
-            <NavItem key={tab} data-cy="logs-tab" role="button">
+            <NavItem key={tab} data-cy="log-tab" role="button">
               <NavLink
                 className={activeTab === tab ? "active" : ""}
                 onClick={() => { setActiveTab(tab); }}>
@@ -91,14 +106,14 @@ const LogTabs = ({ logs }) => {
         })}
       </Nav>
       <TabContent activeTab={activeTab}>
-        { Object.keys(logs).map(tab => {
+        { Object.keys(data).map(tab => {
           return (
             <TabPane key={`log_${tab}`} tabId={tab}>
               <Row>
                 <Col sm="12">
                   <pre
                     className="bg-primary text-white p-2 w-100 overflow-auto log-container border-radius-8">
-                    { logs[tab] }
+                    { data[tab] }
                   </pre>
                 </Col>
               </Row>
@@ -199,4 +214,4 @@ const EnvironmentLogs = ({ logs, name, toggleLogs, fetchLogs, annotations }) =>
     </Modal>
   );
 };
-export { EnvironmentLogs, LogTabs, LogDownloadButton, useDownloadLogs };
+export { EnvironmentLogs, LogTabs, LogDownloadButton, useDownloadLogs, getLogsToShow };

e2e/cypress/fixtures/sessions/cleanLogs.json

@@ -0,0 +1,3 @@
+{
+  "image-download": ""
+}

e2e/cypress/fixtures/sessions/emptyLogs.json

@@ -0,0 +1 @@
+{}

e2e/cypress/integration/local/session.spec.ts

@@ -39,7 +39,7 @@ describe("display a session", () => {
     cy.wait("@getLogs").then( (result) => {
       const logs = result.response.body;
       // validate see logs and can download it
-      cy.get_cy("logs-tab").should("have.length", Object.keys(logs).length);
+      cy.get_cy("log-tab").should("have.length", Object.keys(logs).length);
       cy.get_cy("session-log-download-button").should("be.enabled");
     });
   });
@@ -55,6 +55,32 @@ describe("display a session", () => {
     cy.get_cy("session-log-download-button").should("be.disabled");
   });
 
+  it("display logs in fullscreen session", () => {
+    cy.gui_open_session();
+    fixtures.getLogs("getLogs-empty", "sessions/emptyLogs.json");
+    cy.get_cy("resources-button").click();
+    // empty logs
+    cy.get_cy("logs-tab").click();
+    cy.wait("@getLogs-empty");
+    cy.get_cy("no-logs-message").should("exist");
+    // clean logs
+    fixtures.getLogs("getLogs-clean", "sessions/cleanLogs.json");
+    cy.get_cy("retry-logs-body").click();
+    cy.wait("@getLogs-clean");
+    cy.get_cy("no-logs-message").should("exist");
+    // logs with data
+    fixtures.getLogs("getLogs-full", "sessions/logs.json");
+    cy.get_cy("retry-logs-body").click();
+    cy.wait("@getLogs-full").then( (result) => {
+      const logs = result.response.body;
+      // validate see logs and can download it
+      // eslint-disable-next-line max-nested-callbacks
+      const validLogs = Object.keys(logs).filter(key => logs[key].length > 0);
+      cy.get_cy("log-tab").should("have.length", validLogs.length);
+      cy.get_cy("session-log-download-button").should("be.enabled");
+    });
+  });
+
   it("display fullscreen session", () => {
     cy.gui_open_session();
     // open about modal info