Mothership UI progress

tools/mothership/ui/App.tsx

@@ -33,15 +33,16 @@ export const App = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar
+        elevation={0}
         position="fixed"
         sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
       >
         <Toolbar variant="dense">
           <Link to="/">
-            <img src="/_ga/mship_gopher.png" height="43.5px" />
+            <img src="/_ga/mship_gopher.png" height="41.5px" />
           </Link>
           <Box sx={{ flexGrow: 1, textAlign: 'right' }}>
-            <Button className="native-link" href="/admin">
+            <Button className="native-link" href="/admin" variant="primary">
               Admin
             </Button>
           </Box>

tools/mothership/ui/BUILD

@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-load("@io_bazel_rules_go//go:def.bzl", "go_binary", "go_library")
+load("@io_bazel_rules_go//go:def.bzl", "go_library")
 load("//tools/build_rules/ui_bundle:defs.bzl", "ui_bundle")
 
 ui_bundle(
@@ -21,27 +21,20 @@ ui_bundle(
         "//:node_modules/@mui/icons-material",
         "//:node_modules/@mui/material",
         "//base/ts/mui",
+        "//tools/mothership/proto/v1:mothershippb_ts_proto",
     ],
 )
 
 go_library(
-    name = "ui_lib",
+    name = "ui",
-    srcs = ["main.go"],
+    srcs = ["ui.go"],
     # keep
     embedsrcs = [
         ":bundle",  # keep
         "mship_gopher.png",  # keep
+        "favicon.png",  # keep
     ],
     importpath = "go.resf.org/peridot/tools/mothership/ui",
-    visibility = ["//visibility:private"],
-    deps = [
-        "//base/go",
-        "//vendor/github.com/urfave/cli/v2:cli",
-    ],
-)
-
-go_binary(
-    name = "ui",
-    embed = [":ui_lib"],
     visibility = ["//visibility:public"],
+    deps = ["//base/go"],
 )

tools/mothership/ui/Dashboard.tsx

@@ -15,62 +15,28 @@
  */
 
 import * as React from 'react';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
 
-function createData(
+import { ResourceTable } from 'base/ts/mui/ResourceTable';
-  name: string,
+import { srpmArchiverApi } from 'tools/mothership/ui/api';
-  calories: number,
+import {
-  fat: number,
+  V1ListEntriesResponse,
-  carbs: number,
+  V1Entry,
-  protein: number,
+} from 'bazel-bin/tools/mothership/proto/v1/mothershippb_ts_proto_gen';
-) {
+import { reqap } from 'base/ts/reqap';
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
 
 export const Dashboard = () => {
   return (
-    <TableContainer component={Paper}>
+    <ResourceTable<V1Entry>
-      <Table sx={{ minWidth: 650 }} aria-label="simple table2">
+      load={(pageSize: number, pageToken?: string) => reqap(srpmArchiverApi.listEntries({
-        <TableHead>
+        pageSize: pageSize,
-          <TableRow>
+        pageToken: pageToken,
-            <TableCell>Dessert (100g serving)</TableCell>
+      }))}
-            <TableCell align="right">Calories</TableCell>
+      transform={((response: V1ListEntriesResponse) => response.entries || [])}
-            <TableCell align="right">Fat&nbsp;(g)</TableCell>
+      fields={[
-            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+        { key: 'name', label: 'Entry Name' },
-            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+        { key: 'entryId', label: 'Entry ID' },
-          </TableRow>
+        { key: 'createTime', label: 'Created' },
-        </TableHead>
+      ]}
-        <TableBody>
+    />
-          {rows.map((row) => (
-            <TableRow
-              key={row.name}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell component="th" scope="row">
-                {row.name}
-              </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
-              <TableCell align="right">{row.carbs}</TableCell>
-              <TableCell align="right">{row.protein}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
   );
-}
+};

tools/mothership/ui/api.ts

@@ -0,0 +1,7 @@
+import * as srpmArchiver from 'bazel-bin/tools/mothership/proto/v1/mothershippb_ts_proto_gen';
+
+const cfg = new srpmArchiver.Configuration({
+  basePath: '/api',
+})
+
+export const srpmArchiverApi = new srpmArchiver.SrpmArchiverApi(cfg);

tools/mothership/ui/entrypoint.tsx

@@ -25,7 +25,7 @@ import { peridotTheme } from 'base/ts/mui/theme';
 
 const root = createRoot(document.getElementById('app') || document.body);
 root.render(
-  <BrowserRouter>
+  <BrowserRouter basename={window.__peridot_prefix__ || ''}>
     <ThemeProvider theme={peridotTheme}>
       <CssBaseline />
       <App />

tools/mothership/ui/ui.go

@@ -12,14 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package main
+package mship_ui
 
 import (
 	"embed"
-	_ "embed"
-	"github.com/urfave/cli/v2"
 	base "go.resf.org/peridot/base/go"
-	"os"
 )
 
 //go:embed *
@@ -28,27 +25,19 @@ var assets embed.FS
 //go:embed mship_gopher.png
 var gopher []byte
 
-func run(ctx *cli.Context) error {
+//go:embed favicon.png
-	info := base.FlagsToFrontendInfo(ctx)
+var favicon []byte
+
+func InitFrontendInfo(info *base.FrontendInfo) *embed.FS {
+	if info == nil {
+		info = &base.FrontendInfo{}
+	}
 	info.Title = "Mship"
 	info.NoAuth = true
 	info.AdditionalContent = map[string][]byte{
 		"/_ga/mship_gopher.png": gopher,
+		"/_ga/favicon.png":      favicon,
 	}
 
-	base.FrontendServer(info, &assets)
+	return &assets
-
-	return nil
-}
-
-func main() {
-	app := &cli.App{
-		Name:   "mship_ui",
-		Action: run,
-		Flags:  base.WithDefaultFrontendNoAuthCliFlags(),
-	}
-
-	if err := app.Run(os.Args); err != nil {
-		base.LogFatalf("failed to start mship_ui: %v", err)
-	}
 }