Merge remote-tracking branch 'origin/master' into delete-project-data

Author: haraldschilly

src/README.md

@@ -192,7 +192,7 @@ There are two types of file system build caching. These greatly improve the time
 It is handy to have a user with admin rights in your dev cocalc server. With the database running you can make a `[email protected]` an admin as follows:
 
 ```sh
-~/cocalc/src$ pnpm run c
+~/cocalc/src$ pnpm install -D express && pnpm run c
 ...
 > db.make_user_admin({email_address:'[email protected]', cb:console.log})
 ...

src/packages/frontend/components/refresh.tsx

@@ -1,16 +1,68 @@
 import { Button } from "antd";
 import { Icon } from "./icon";
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
+import ShowError from "@cocalc/frontend/components/error";
 
 interface Props {
-  refresh: () => void;
+  refresh: Function;
   style?: CSSProperties;
+  refreshing?;
+  setRefreshing?;
 }
 
-export default function Refresh({ refresh, style }: Props) {
+export default function Refresh({
+  refresh,
+  style,
+  refreshing,
+  setRefreshing,
+}: Props) {
+  if (refreshing == null) {
+    return <UnControlled refresh={refresh} style={style} />;
+  } else {
+    return (
+      <Controlled
+        refresh={refresh}
+        style={style}
+        refreshing={refreshing}
+        setRefreshing={setRefreshing}
+      />
+    );
+  }
+}
+
+function UnControlled({ refresh, style }) {
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  return (
+    <Controlled
+      refresh={refresh}
+      style={style}
+      refreshing={refreshing}
+      setRefreshing={setRefreshing}
+    />
+  );
+}
+
+function Controlled({ refresh, style, refreshing, setRefreshing }) {
+  const [error, setError] = useState<string>("");
   return (
-    <Button onClick={refresh} style={style}>
-      <Icon name="refresh" /> Refresh
-    </Button>
+    <>
+      <Button
+        onClick={async () => {
+          try {
+            setError("");
+            setRefreshing?.(true);
+            await refresh();
+          } catch (err) {
+            setError(`${err}`);
+          } finally {
+            setRefreshing?.(false);
+          }
+        }}
+        style={style}
+      >
+        <Icon name="refresh" spin={refreshing} /> Refresh
+      </Button>
+      <ShowError error={error} setError={setError} />
+    </>
   );
 }

src/packages/frontend/compute/cloud-filesystem/cloud-filesystems.tsx

@@ -14,6 +14,8 @@ import { Button, Spin } from "antd";
 import CreateCloudFilesystem from "./create";
 import CloudFilesystem from "./cloud-filesystem";
 import { Icon } from "@cocalc/frontend/components/icon";
+import { A } from "@cocalc/frontend/components/A";
+import RefreshButton from "@cocalc/frontend/components/refresh";
 import { cmp } from "@cocalc/util/misc";
 import {
   SortableList,
@@ -148,11 +150,11 @@ export default function CloudFilesystems({ project_id }: Props) {
 
   return (
     <div>
-      <Button style={{ position: "absolute", right: 0 }} onClick={refresh}>
-        <Icon name="refresh" />
-        Refresh{" "}
-        {refreshing ? <Spin style={{ marginLeft: "15px" }} /> : undefined}
-      </Button>
+      <RefreshButton
+        refresh={refresh}
+        style={{ position: "absolute", right: 0 }}
+        refreshing={refreshing}
+      />
       <h2 style={{ textAlign: "center" }}>Cloud File Systems</h2>
       <div style={{ textAlign: "center" }}>
         <Button
@@ -163,9 +165,20 @@ export default function CloudFilesystems({ project_id }: Props) {
           <Icon name="youtube" style={{ color: "red" }} />
           Short Demo
         </Button>
-        <Button href="https://youtu.be/uk5eA5piQEo" target="_new">
+        <Button
+          href="https://youtu.be/uk5eA5piQEo"
+          target="_new"
+          style={{ marginRight: "15px" }}
+        >
           <Icon name="youtube" style={{ color: "red" }} />
-          Longer Demo
+          Long Demo
+        </Button>
+        <Button
+          href="https://doc.cocalc.com/cloud_file_system.html"
+          target="_new"
+        >
+          <Icon name="external-link" />
+          Docs
         </Button>
       </div>
       <p
@@ -176,12 +189,15 @@ export default function CloudFilesystems({ project_id }: Props) {
           color: "#666",
         }}
       >
-        CoCalc Cloud File Systems are scalable distributed POSIX shared
-        file systems with fast local caching. Use them simultaneously from all
-        compute servers in this project. There are no limits on how much data
-        you can store. You do not specify the size of a cloud file system in
-        advance. The cost per GB is typically much less than a compute server
-        disk, but you pay network usage and operations.
+        <A href="https://doc.cocalc.com/cloud_file_system.html">
+          CoCalc Cloud File Systems{" "}
+        </A>
+        are scalable distributed POSIX shared file systems with fast local
+        caching. Use them simultaneously from all compute servers in this
+        project. There are no limits on how much data you can store. You do not
+        specify the size of a cloud file system in advance. The cost per GB is
+        typically much less than a compute server disk, but you pay network
+        usage and operations.
       </p>
 
       <div style={{ margin: "5px 0" }}>

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/google-cloud-config.tsx

@@ -1411,9 +1411,11 @@ function ensureConsistentImage(configuration, changes, IMAGES) {
   if (gpu && !gpuSelected) {
     // GPU image but non-GPU machine -- change image to non-GPU
     configuration["image"] = changes["image"] = "python";
+    configuration["tag"] = changes["tag"] = null;
   } else if (!gpu && gpuSelected) {
     // GPU machine but not image -- change image to pytorch
     configuration["image"] = changes["image"] = "pytorch";
+    configuration["tag"] = changes["tag"] = null;
   }
 }
 

src/packages/frontend/compute/inline.tsx

@@ -59,7 +59,7 @@ export default function ComputeServer({
     }
     if (!id) {
       setServer({
-        title: "Default Shared Resources",
+        title: "Home Base",
         color: PROJECT_COLOR,
         project_specific_id: 0,
       });