[vtadmin-web] Add NavRail component

web/vtadmin/src/components/App.module.scss

@@ -13,14 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 .container {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: 24px;
+  display: grid;
+  grid-template-areas: 'nav content';
+  grid-template-rows: auto;
+  grid-template-columns: 240px auto;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  width: 100vw;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 48px auto;
+.navContainer {
+  grid-area: nav;
+  height: 100vh;
+}
+
+.mainContainer {
+  grid-area: content;
+  overflow: auto;
+  padding: 24px;
 }

web/vtadmin/src/components/App.tsx

@@ -14,32 +14,39 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import { BrowserRouter as Router, Link, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 
 import style from './App.module.scss';
-import logo from '../img/vitess-icon-color.svg';
 import { Tablets } from './routes/Tablets';
 import { Debug } from './routes/Debug';
+import { NavRail } from './NavRail';
+import { Error404 } from './routes/Error404';
 
 export const App = () => {
     return (
         <Router>
             <div className={style.container}>
-                <Link to="/">
-                    <img className={style.logo} src={logo} alt="logo" height={40} />
-                </Link>
+                <div className={style.navContainer}>
+                    <NavRail />
+                </div>
 
-                <Switch>
-                    <Route path="/tablets">
-                        <Tablets />
-                    </Route>
+                <div className={style.mainContainer}>
+                    <Switch>
+                        <Route path="/tablets">
+                            <Tablets />
+                        </Route>
 
-                    <Route path="/debug">
-                        <Debug />
-                    </Route>
+                        <Route path="/debug">
+                            <Debug />
+                        </Route>
 
-                    <Redirect exact from="/" to="/tablets" />
-                </Switch>
+                        <Redirect exact from="/" to="/tablets" />
+
+                        <Route>
+                            <Error404 />
+                        </Route>
+                    </Switch>
+                </div>
             </div>
         </Router>
     );

web/vtadmin/src/components/NavRail.module.scss

@@ -0,0 +1,99 @@
+/**
+ * Copyright 2021 The Vitess 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.
+ */
+
+$navRailHoverTransition: background-color 0.1s ease-in-out;
+
+.container {
+  background: var(--backgroundSecondary);
+  border-right: solid 1px var(--backgroundSecondaryHighlight);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.logoContainer {
+  display: block;
+  padding: 24px;
+  text-align: center;
+}
+
+.footerContainer {
+  margin: auto 0 24px 0;
+}
+
+.navLinks {
+  margin: 24px 0 32px 0;
+}
+
+.navList {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &::after {
+    content: '';
+    background-color: var(--colorScaffolding);
+    display: block;
+    height: 1px;
+    margin: 20px 24px;
+    max-width: 100%;
+  }
+}
+
+.navList:last-child::after,
+.footerContainer .navList::after {
+  content: none;
+}
+
+a.navLink {
+  border-left: solid 4px transparent;
+  color: var(--textColorPrimary);
+  display: flex;
+  flex-wrap: nowrap;
+  font-weight: 500;
+  padding: 12px 24px 12px 20px;
+  text-decoration: none;
+  transition: $navRailHoverTransition;
+
+  &.navLinkActive {
+    border-color: var(--colorPrimary);
+    color: var(--colorPrimary);
+  }
+
+  &:hover {
+    background: var(--backgroundSecondaryHighlight);
+    color: var(--colorPrimary);
+  }
+}
+
+.badge {
+  background-color: var(--backgroundSecondaryHighlight);
+  border-radius: 20px;
+  color: var(--textColorSecondary);
+  display: inline-block;
+  font-size: 1.2rem;
+  margin-left: auto;
+  padding: 2px 8px;
+  transition: $navRailHoverTransition;
+}
+
+a.navLinkActive .badge,
+a.navLink:hover .badge {
+  background-color: var(--backgroundPrimaryHighlight);
+  color: var(--colorPrimary);
+}

web/vtadmin/src/components/NavRail.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright 2021 The Vitess 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 * as React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+
+import style from './NavRail.module.scss';
+import logo from '../img/vitess-icon-color.svg';
+import { useTablets } from '../hooks/api';
+
+export const NavRail = () => {
+    const { data: tabletData } = useTablets();
+
+    return (
+        <div className={style.container}>
+            <Link className={style.logoContainer} to="/">
+                <img alt="Vitess logo" className={style.logo} src={logo} height={40}></img>
+            </Link>
+
+            <div className={style.navLinks}>
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Dashboard" to="/dashboard" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Workflows" to="/workflows" count={0} />
+                    </li>
+                </ul>
+
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Clusters" to="/clusters" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Gates" to="/gates" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Keyspaces" to="/keyspaces" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Schemas" to="/schemas" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Tablets" to="/tablets" count={(tabletData || []).length} />
+                    </li>
+                </ul>
+
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="VTExplain" to="/vtexplain" />
+                    </li>
+                    <li>
+                        <NavRailLink text="Settings" to="/settings" />
+                    </li>
+                </ul>
+            </div>
+
+            <div className={style.footerContainer}>
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Debug" to="/debug" />
+                    </li>
+                    <li>
+                        <NavRailLink text="Shortcuts" to="/shortcuts" />
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+const NavRailLink = ({ count, text, to }: { count?: number; text: string; to: string }) => {
+    return (
+        <NavLink activeClassName={style.navLinkActive} className={style.navLink} to={to}>
+            <span>{text}</span>
+            {typeof count === 'number' && <div className={style.badge}>{count}</div>}
+        </NavLink>
+    );
+};

web/vtadmin/src/components/routes/Error404.module.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 The Vitess 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.
+ */
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 40vh;
+  justify-content: center;
+  margin-top: 20vh;
+}

web/vtadmin/src/components/routes/Error404.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 The Vitess 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 style from './Error404.module.scss';
+
+export const Error404 = () => {
+    return (
+        <div className={style.container}>
+            <h1>☹️ 404 ☹️</h1>
+        </div>
+    );
+};

web/vtadmin/src/index.css

@@ -35,24 +35,6 @@
   --colorError50: #ff6659;
   --colorError200: #9a0007;
 
-  /* Light theme colour palette */
-  --background_light: #fff;
-  --colorPrimary_light: #3d5afe;
-  --colorPrimary50_light: #8187ff;
-  --colorPrimary200_light: #0031ca;
-  --textColorPrimary_light: #17171b;
-  --textColorSecondary_light: #718096;
-  --textColorDisabled_light: #cbd5e0;
-
-  /* Dark theme colour palette */
-  --background_dark: #17171b;
-  --colorPrimary_dark: #8187ff;
-  --colorPrimary50_dark: #b6b7ff;
-  --colorPrimary200_dark: #4a5acb;
-  --textColorPrimary_dark: #fff;
-  --textColorSecondary_dark: #cbd5e0;
-  --textColorDisabled_dark: #2d3748;
-
   /* Fonts */
   --fontFamilyPrimary:
     'NotoSans',
@@ -82,20 +64,34 @@
   --lineHeightHeading: 1.36;
 
   /* Layout variables, set to light theme by default */
-  --backgroundPrimary: var(--background_light);
+  --backgroundPrimary: #fff;
+  --backgroundPrimaryHighlight: rgba(61, 90, 254, 0.1);
+  --backgroundSecondary: var(--grey75);
+  --backgroundSecondaryHighlight: var(--grey200);
+  --colorPrimary: #3d5afe;
+  --colorPrimary50: #8187ff;
+  --colorPrimary200: #0031ca;
+  --colorScaffolding: var(--grey400);
   --tableBorderColor: var(--grey400);
-  --textColorPrimary: var(--textColorPrimary_light);
-  --textColorSecondary: var(--textColorSecondary_light);
-  --textColorDisabled: var(--textColorDisabled_light);
+  --textColorPrimary: #17171b;
+  --textColorSecondary: #718096;
+  --textColorDisabled: #cbd5e0;
 }
 
 /* Dark theme */
 [data-vtadmin-theme="dark"] {
-  --backgroundPrimary: var(--background_dark);
+  --backgroundPrimary: #17171b;
+  --backgroundPrimaryHighlight: rgba(129, 135, 255, 0.2);
+  --backgroundSecondary: var(--grey900);
+  --backgroundSecondaryHighlight: var(--grey800);
+  --colorPrimary: #8187ff;
+  --colorPrimary50: #b6b7ff;
+  --colorPrimary200: #4a5acb;
+  --colorScaffolding: var(--grey600);
   --tableBorderColor: var(--grey800);
-  --textColorPrimary: var(--textColorPrimary_dark);
-  --textColorSecondary: var(--textColorSecondary_dark);
-  --textColorDisabled: var(--textColorDisabled_dark);
+  --textColorPrimary: #fff;
+  --textColorSecondary: #cbd5e0;
+  --textColorDisabled: #2d3748;
 }
 
 html {