feat: update getting started guide

garethgeorge · Nov 16, 2023 · 2c421d6 · 2c421d6
1 parent b22e006
commit 2c421d6
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 88 deletions.
diff --git a/webui/gen/ts/v1/operations.pb.ts b/webui/gen/ts/v1/operations.pb.ts
@@ -45,7 +45,7 @@ type BaseOperation = {
 }
 
 export type Operation = BaseOperation
-  & OneOf<{ operationBackup: OperationBackup }>
+  & OneOf<{ operationBackup: OperationBackup; operationIndexSnapshot: OperationIndexSnapshot }>
 
 export type OperationEvent = {
   type?: OperationEventType
@@ -54,4 +54,8 @@ export type OperationEvent = {
 
 export type OperationBackup = {
   lastStatus?: V1Restic.BackupProgressEntry
+}
+
+export type OperationIndexSnapshot = {
+  snapshot?: V1Restic.ResticSnapshot
 }
diff --git a/webui/gen/ts/v1/service.pb.ts b/webui/gen/ts/v1/service.pb.ts
@@ -16,89 +16,34 @@ export type ListSnapshotsRequest = {
 }
 
 export type GetOperationsRequest = {
-  repoId?: string;
-  planId?: string;
-  lastN?: string;
-};
+  repoId?: string
+  planId?: string
+  lastN?: string
+}
 
 export class ResticUI {
-  static GetConfig(
-    req: GoogleProtobufEmpty.Empty,
-    initReq?: fm.InitReq
-  ): Promise<V1Config.Config> {
-    return fm.fetchReq<GoogleProtobufEmpty.Empty, V1Config.Config>(
-      `/v1/config?${fm.renderURLSearchParams(req, [])}`,
-      { ...initReq, method: "GET" }
-    );
+  static GetConfig(req: GoogleProtobufEmpty.Empty, initReq?: fm.InitReq): Promise<V1Config.Config> {
+    return fm.fetchReq<GoogleProtobufEmpty.Empty, V1Config.Config>(`/v1/config?${fm.renderURLSearchParams(req, [])}`, {...initReq, method: "GET"})
   }
-  static SetConfig(
-    req: V1Config.Config,
-    initReq?: fm.InitReq
-  ): Promise<V1Config.Config> {
-    return fm.fetchReq<V1Config.Config, V1Config.Config>(`/v1/config`, {
-      ...initReq,
-      method: "POST",
-      body: JSON.stringify(req, fm.replacer),
-    });
+  static SetConfig(req: V1Config.Config, initReq?: fm.InitReq): Promise<V1Config.Config> {
+    return fm.fetchReq<V1Config.Config, V1Config.Config>(`/v1/config`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
-  static AddRepo(
-    req: V1Config.Repo,
-    initReq?: fm.InitReq
-  ): Promise<V1Config.Config> {
-    return fm.fetchReq<V1Config.Repo, V1Config.Config>(`/v1/config/repo`, {
-      ...initReq,
-      method: "POST",
-      body: JSON.stringify(req, fm.replacer),
-    });
+  static AddRepo(req: V1Config.Repo, initReq?: fm.InitReq): Promise<V1Config.Config> {
+    return fm.fetchReq<V1Config.Repo, V1Config.Config>(`/v1/config/repo`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
-  static GetOperationEvents(
-    req: GoogleProtobufEmpty.Empty,
-    entityNotifier?: fm.NotifyStreamEntityArrival<V1Operations.OperationEvent>,
-    initReq?: fm.InitReq
-  ): Promise<void> {
-    return fm.fetchStreamingRequest<
-      GoogleProtobufEmpty.Empty,
-      V1Operations.OperationEvent
-    >(
-      `/v1/events/operations?${fm.renderURLSearchParams(req, [])}`,
-      entityNotifier,
-      { ...initReq, method: "GET" }
-    );
+  static GetOperationEvents(req: GoogleProtobufEmpty.Empty, entityNotifier?: fm.NotifyStreamEntityArrival<V1Operations.OperationEvent>, initReq?: fm.InitReq): Promise<void> {
+    return fm.fetchStreamingRequest<GoogleProtobufEmpty.Empty, V1Operations.OperationEvent>(`/v1/events/operations?${fm.renderURLSearchParams(req, [])}`, entityNotifier, {...initReq, method: "GET"})
   }
-  static GetOperations(
-    req: GetOperationsRequest,
-    initReq?: fm.InitReq
-  ): Promise<V1Operations.OperationList> {
-    return fm.fetchReq<GetOperationsRequest, V1Operations.OperationList>(
-      `/v1/operations`,
-      { ...initReq, method: "POST", body: JSON.stringify(req, fm.replacer) }
-    );
+  static GetOperations(req: GetOperationsRequest, initReq?: fm.InitReq): Promise<V1Operations.OperationList> {
+    return fm.fetchReq<GetOperationsRequest, V1Operations.OperationList>(`/v1/operations`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
-  static ListSnapshots(
-    req: ListSnapshotsRequest,
-    initReq?: fm.InitReq
-  ): Promise<V1Restic.ResticSnapshotList> {
-    return fm.fetchReq<ListSnapshotsRequest, V1Restic.ResticSnapshotList>(
-      `/v1/snapshots`,
-      { ...initReq, method: "POST", body: JSON.stringify(req, fm.replacer) }
-    );
+  static ListSnapshots(req: ListSnapshotsRequest, initReq?: fm.InitReq): Promise<V1Restic.ResticSnapshotList> {
+    return fm.fetchReq<ListSnapshotsRequest, V1Restic.ResticSnapshotList>(`/v1/snapshots`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
-  static Backup(
-    req: TypesValue.StringValue,
-    initReq?: fm.InitReq
-  ): Promise<GoogleProtobufEmpty.Empty> {
-    return fm.fetchReq<TypesValue.StringValue, GoogleProtobufEmpty.Empty>(
-      `/v1/cmd/backup`,
-      { ...initReq, method: "POST", body: JSON.stringify(req, fm.replacer) }
-    );
+  static Backup(req: TypesValue.StringValue, initReq?: fm.InitReq): Promise<GoogleProtobufEmpty.Empty> {
+    return fm.fetchReq<TypesValue.StringValue, GoogleProtobufEmpty.Empty>(`/v1/cmd/backup`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
-  static PathAutocomplete(
-    req: TypesValue.StringValue,
-    initReq?: fm.InitReq
-  ): Promise<TypesValue.StringList> {
-    return fm.fetchReq<TypesValue.StringValue, TypesValue.StringList>(
-      `/v1/autocomplete/path`,
-      { ...initReq, method: "POST", body: JSON.stringify(req, fm.replacer) }
-    );
+  static PathAutocomplete(req: TypesValue.StringValue, initReq?: fm.InitReq): Promise<TypesValue.StringList> {
+    return fm.fetchReq<TypesValue.StringValue, TypesValue.StringList>(`/v1/autocomplete/path`, {...initReq, method: "POST", body: JSON.stringify(req, fm.replacer)})
   }
 }
diff --git a/webui/src/components/GettingStartedGuide.tsx b/webui/src/components/GettingStartedGuide.tsx
@@ -1,9 +1,15 @@
+import { Collapse, Divider, Typography } from "antd";
 import React from "react";
+import { useRecoilValue } from "recoil";
+import { configState } from "../state/config";
 
 export const GettingStartedGuide = () => {
+  const config = useRecoilValue(configState);
+
   return (
     <>
       <h1>Getting Started</h1>
+      <Divider orientation="left">Overview</Divider>
       <ul>
         <li>
           Repos map directly to restic repositories, start by configuring your
@@ -22,6 +28,31 @@ export const GettingStartedGuide = () => {
           configured.
         </li>
       </ul>
+      <Divider orientation="left">Tips</Divider>
+      <ul>
+        <li>
+          Backup your ResticUI configuration - your ResticUI config holds all of
+          your repos, plans, and the passwords to decrypt them. When you have
+          ResticUI configured to your liking make sure to store a copy of your
+          config (or minimally a copy of your passwords) in a safe location e.g.
+          a secure note in your password manager.
+        </li>
+      </ul>
+      <Divider orientation="left">Config View</Divider>
+      <Collapse
+        size="small"
+        items={[
+          {
+            key: "1",
+            label: "Config JSON hidden for security",
+            children: (
+              <Typography>
+                <pre>{JSON.stringify(config, null, 2)}</pre>
+              </Typography>
+            ),
+          },
+        ]}
+      />
     </>
   );
 };
diff --git a/webui/src/components/MainContentArea.tsx b/webui/src/components/MainContentArea.tsx
@@ -1,9 +1,8 @@
 import { Breadcrumb, Layout, Spin, theme } from "antd";
-import { BreadcrumbItemType } from "antd/es/breadcrumb/Breadcrumb";
 import { Content } from "antd/es/layout/layout";
-import React, { useContext } from "react";
-import { createContext } from "react";
+import React from "react";
 import { atom, useRecoilValue, useSetRecoilState } from "recoil";
+import { GettingStartedGuide } from "./GettingStartedGuide";
 
 interface Breadcrumb {
   title: string;
@@ -35,8 +34,13 @@ export const MainContentArea = () => {
     token: { colorBgContainer },
   } = theme.useToken();
 
-  const content = useRecoilValue(contentPanel);
-  const crumbs = useRecoilValue(breadcrumbs);
+  let content = useRecoilValue(contentPanel);
+  let crumbs = useRecoilValue(breadcrumbs);
+
+  if (!content) {
+    content = <GettingStartedGuide />;
+    crumbs = [{ title: "Getting started" }];
+  }
 
   return (
     <Layout style={{ padding: "0 24px 24px" }}>

diff --git a/webui/src/views/App.tsx b/webui/src/views/App.tsx
@@ -25,16 +25,14 @@ export const App: React.FC = () => {
     token: { colorBgContainer, colorTextLightSolid },
   } = theme.useToken();
 
-  const setContent = useSetContent();
   const [config, setConfig] = useRecoilState(configState);
   const alertApi = useAlertApi()!;
   const showModal = useShowModal();
+  const setContent = useSetContent();
 
   useEffect(() => {
     showModal(<Spin spinning={true} fullscreen />);
 
-    setContent(<GettingStartedGuide />, [{ title: "Getting Started" }]);
-
     fetchConfig()
       .then((config) => {
         setConfig(config);
@@ -47,14 +45,18 @@ export const App: React.FC = () => {
       });
   }, []);
 
-  console.log("rerender config ", config);
   const items = getSidenavItems(config);
 
   return (
-    <Layout style={{ height: "100vh" }}>
+    <Layout style={{ height: "auto" }}>
       <Header style={{ display: "flex", alignItems: "center" }}>
-        <h1 style={{ color: colorTextLightSolid }}>
-          ResticUI{" "}
+        <h1>
+          <a
+            style={{ color: colorTextLightSolid }}
+            onClick={() => setContent(null, [])}
+          >
+            ResticUI{" "}
+          </a>
           <small style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.3em" }}>
             {process.env.BUILD_TIME ? "v" + process.env.BUILD_TIME : ""}
           </small>