fix #7678 -- Too many JupyterLabs/VS Code buttons

Author: williamstein

src/packages/frontend/compute/compute-server-log.tsx

@@ -5,7 +5,7 @@ More precisely this is a little button that you click on, and
 it shows the log in a modal.
 */
 
-import { Modal, Button, Spin, Table } from "antd";
+import { Modal, Button, Spin, Table, Tooltip } from "antd";
 import { useEffect, useState } from "react";
 import LogEntry from "./log-entry";
 import type { ComputeServerEvent } from "@cocalc/util/compute/log";
@@ -25,7 +25,7 @@ export default function ComputeServerLog({
   const [open, setOpen] = useState<boolean>(false);
 
   return (
-    <>
+    <Tooltip title={"Show configuration and control log"}>
       <Button
         size={"small"}
         type="text"
@@ -37,7 +37,7 @@ export default function ComputeServerLog({
         <Icon name="history" /> Log
       </Button>
       {open && <LogModal id={id} close={() => setOpen(false)} />}
-    </>
+    </Tooltip>
   );
 }
 

src/packages/frontend/compute/compute-server.tsx

@@ -373,20 +373,20 @@ export default function ComputeServer({
             {id != null && (
               <div style={{ color: "#888" }}>Id: {project_specific_id}</div>
             )}
-            {id != null && (
-              <ComputeServerLog id={id} style={{ marginLeft: "-15px" }} />
-            )}
-            {id != null &&
-              configuration.cloud == "google-cloud" &&
-              (state == "starting" ||
-                state == "stopping" ||
-                state == "running") && (
-                <SerialPortOutput
-                  id={id}
-                  style={{ marginLeft: "-15px" }}
-                  title={title}
-                />
-              )}
+            <div style={{ display: "flex", marginLeft: "-20px" }}>
+              {id != null && <ComputeServerLog id={id} />}
+              {id != null &&
+                configuration.cloud == "google-cloud" &&
+                (state == "starting" ||
+                  state == "stopping" ||
+                  state == "running") && (
+                  <SerialPortOutput
+                    id={id}
+                    title={title}
+                    style={{ marginLeft: "-5px" }}
+                  />
+                )}
+            </div>
             {id != null && (
               <div style={{ marginLeft: "-15px" }}>
                 <CurrentCost state={state} cost_per_hour={cost_per_hour} />

src/packages/frontend/compute/menu.tsx

@@ -7,7 +7,6 @@ import type { MenuProps } from "antd";
 import { A, Icon } from "@cocalc/frontend/components";
 import { useMemo, useState } from "react";
 import getTitle from "./get-title";
-import { avatar_fontcolor } from "@cocalc/frontend/account/avatar/font-color";
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { LogModal } from "./compute-server-log";
 import { EditModal } from "./compute-server";
@@ -46,8 +45,6 @@ function getItems({
   id,
   project_id,
   account_id,
-  title,
-  color,
   isAdmin,
 }: {
   id: number;
@@ -82,34 +79,9 @@ function getItems({
 
   const titleAndColor = {
     key: "title-color",
-    icon: <Icon name="server" />,
+    icon: <Icon name="colors" />,
     disabled: !is_owner,
-    label: (
-      <div
-        style={{
-          fontWeight: "bold",
-          fontSize: "11pt",
-          display: "flex",
-          color: avatar_fontcolor(color),
-          background: color,
-          padding: "0 5px",
-          borderRadius: "3px",
-        }}
-      >
-        <div
-          style={{
-            maxWidth: "20ex",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            marginRight: "5px",
-          }}
-        >
-          {title}
-        </div>
-        (Id: {server.project_specific_id})
-      </div>
-    ),
+    label: "Edit Title and Color",
   };
   const jupyterlab = {
     key: "top-jupyterlab",
@@ -133,29 +105,10 @@ function getItems({
     key: "xpra",
     label: "X11 Desktop",
     icon: <Icon name="desktop" />,
-    disabled: apps["xpra"] == null,
-  };
-
-  const logs = {
-    key: "logs",
-    label: "Logs",
-    icon: <Icon name="history" />,
-    children: [
-      {
-        key: "control-log",
-        icon: <Icon name="history" />,
-        label: "Control and Configuration Log",
-      },
-      {
-        key: "serial-console-log",
-        disabled:
-          server.cloud != "google-cloud" ||
-          server.state == "off" ||
-          server.state == "deprovisioned",
-        icon: <Icon name="laptop" />,
-        label: "Serial Console Log",
-      },
-    ],
+    disabled:
+      apps["xpra"] == null ||
+      server.state != "running" ||
+      !server.data?.externalIp,
   };
 
   const optionItems: (
@@ -257,36 +210,6 @@ function getItems({
     ],
   };
 
-  const launch = {
-    key: "launch",
-    label: "Applications",
-    icon: <Icon name="global" />,
-    disabled: server.state != "running",
-    children: [
-      {
-        key: "run-app-on",
-        type: "group",
-        label: "Run On Compute Server",
-        children: [
-          { ...jupyterlab, key: "jupyterlab-sub" },
-          { ...vscode, key: "vscode-sub" },
-          { ...xpra, key: "xpra-sub" },
-          //         {
-          //           key: "pluto",
-          //           label: "Pluto (Julia)",
-          //           icon: <Icon name="julia" />,
-          //         },
-          //         {
-          //           key: "rstudio",
-          // value:"rstudio",
-          //           label: "R Studio",
-          //           icon: <Icon name="r" />,
-          //         },
-        ],
-      },
-    ],
-  };
-
   const help = {
     key: "help",
     icon: <Icon name="question-circle" />,
@@ -344,17 +267,33 @@ function getItems({
     },
     jupyterlab,
     vscode,
+    xpra,
     {
       type: "divider",
     },
-    launch,
-    logs,
+    settings,
     options,
     {
       type: "divider",
     },
+    {
+      key: "control-log",
+      icon: <Icon name="history" />,
+      label: "Configuration Log",
+    },
+    {
+      key: "serial-console-log",
+      disabled:
+        server.cloud != "google-cloud" ||
+        server.state == "off" ||
+        server.state == "deprovisioned",
+      icon: <Icon name="laptop" />,
+      label: "Serial Console",
+    },
+    {
+      type: "divider",
+    },
     help,
-    settings,
     //     {
     //       key: "control",
     //       icon: <Icon name="wrench" />,
@@ -471,7 +410,7 @@ export default function Menu({
       setTitle(await getTitle(id));
     })();
     return {
-      items: getItems({ ...title, id, project_id, account_id, isAdmin }),
+      items: getItems({ id, project_id, account_id, isAdmin }),
       onClick: async (obj) => {
         setOpen(false);
         let cmd = obj.key.startsWith("top-") ? obj.key.slice(4) : obj.key;

src/packages/frontend/compute/serial-port-output.tsx

@@ -49,7 +49,7 @@ export default function SerialPortOutput({
           style={{ color: "#666", ...style }}
           onClick={() => setShow(!show)}
         >
-          <Icon name="laptop" /> Serial
+          <Icon name="laptop" />
         </Button>
         {show && (
           <SerialLogModal id={id} title={title} close={() => setShow(false)} />