Mship UI files I forgot to add

.gitignore

@@ -3,3 +3,6 @@
 /bazel-*
 node_modules
 .DS_Store
+
+# ignore nfv2 generated content
+vendor/go.resf.org/peridot

tools/mothership/admin/ui/App.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright 2023 Peridot Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { Theme } from '@mui/material/styles';
+
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+
+import { Dashboard } from './Dashboard';
+import { Drawer } from 'base/ts/mui/Drawer';
+import { Route, Routes } from 'react-router-dom';
+
+export const App = () => {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <AppBar
+        position="fixed"
+        elevation={0}
+        sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
+      >
+        <Toolbar variant="dense">
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Mship Admin
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        sections={[
+          {
+            links: [
+              { text: 'Dashboard', href: '/', icon: <DashboardIcon /> },
+            ],
+          },
+        ]}
+      />
+      <Box component="main" sx={{ p: 3, flexGrow: 1 }}>
+        <Toolbar variant="dense" />
+        <Routes>
+          <Route index element={<Dashboard />} />
+        </Routes>
+      </Box>
+    </Box>
+  );
+};

tools/mothership/admin/ui/BUILD

@@ -0,0 +1,50 @@
+# Copyright 2023 Peridot Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# 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("//tools/build_rules/ui_bundle:defs.bzl", "ui_bundle")
+
+ui_bundle(
+    name = "bundle",
+    deps = [
+        "//:node_modules/@mui/icons-material",
+        "//:node_modules/@mui/material",
+        "//base/ts/mui",
+    ],
+)
+
+go_library(
+    name = "ui_lib",
+    srcs = ["main.go"],
+    embedsrcs = [
+        ":bundle",  # keep
+        "App.tsx",
+        "BUILD",
+        "Dashboard.tsx",
+        "entrypoint.tsx",
+        "main.go",
+    ],
+    importpath = "go.resf.org/peridot/tools/mothership/admin/ui",
+    visibility = ["//visibility:private"],
+    deps = [
+        "//base/go",
+        "//vendor/github.com/urfave/cli/v2:cli",
+    ],
+)
+
+go_binary(
+    name = "ui",
+    embed = [":ui_lib"],
+    visibility = ["//visibility:public"],
+)

tools/mothership/ui/App.tsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import { Link, Route, Routes } from 'react-router-dom';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -27,35 +28,25 @@ import ListAltIcon from '@mui/icons-material/ListAlt';
 
 import { Dashboard } from './Dashboard';
 import { Drawer } from 'base/ts/mui/Drawer';
-import { Route, Routes } from 'react-router-dom';
 
 export const App = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar
         position="fixed"
-        elevation={0}
         sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
       >
         <Toolbar variant="dense">
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Mship
-          </Typography>
-          <Button className="native-link" href="/auth/oidc" color="inherit">
-            Login
-          </Button>
+          <Link to="/">
+            <img src="/_ga/mship_gopher.png" height="43.5px" />
+          </Link>
+          <Box sx={{ flexGrow: 1, textAlign: 'right' }}>
+            <Button className="native-link" href="/admin">
+              Admin
+            </Button>
+          </Box>
         </Toolbar>
       </AppBar>
-      <Drawer
-        sections={[
-          {
-            links: [
-              { text: 'Dashboard', href: '/', icon: <DashboardIcon /> },
-              { text: 'Packages', href: '/packages', icon: <ListAltIcon /> },
-            ],
-          },
-        ]}
-      />
       <Box component="main" sx={{ p: 3, flexGrow: 1 }}>
         <Toolbar variant="dense" />
         <Routes>