vitess.io/vitess@v0.16.2/web/vtadmin/src/components/NavRail.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  import * as React from 'react';
    17  import { Link, NavLink } from 'react-router-dom';
    18  
    19  import style from './NavRail.module.scss';
    20  import { useClusters, useGates, useKeyspaces, useSchemas, useTablets, useVtctlds, useWorkflows } from '../hooks/api';
    21  import { Icon, Icons } from './Icon';
    22  import { getTableDefinitions } from '../util/tableDefinitions';
    23  import VitessLogo from './VitessLogo';
    24  
    25  export const NavRail = () => {
    26      const { data: clusters = [] } = useClusters();
    27      const { data: keyspaces = [] } = useKeyspaces();
    28      const { data: gates = [] } = useGates();
    29      const { data: schemas = [] } = useSchemas();
    30      const { data: tablets = [] } = useTablets();
    31      const { data: vtctlds = [] } = useVtctlds();
    32      const { data: workflows = [] } = useWorkflows();
    33  
    34      const tds = React.useMemo(() => getTableDefinitions(schemas), [schemas]);
    35  
    36      return (
    37          <div className={style.container}>
    38              <Link className={style.logoContainer} to="/">
    39                  <VitessLogo className="h-[40px]" />
    40              </Link>
    41  
    42              <div className={style.navLinks}>
    43                  <ul className={style.navList}>
    44                      <li>
    45                          <NavRailLink hotkey="C" text="Clusters" to="/clusters" count={clusters.length} />
    46                      </li>
    47                      <li>
    48                          <NavRailLink hotkey="G" text="Gates" to="/gates" count={gates.length} />
    49                      </li>
    50                      <li>
    51                          <NavRailLink hotkey="K" text="Keyspaces" to="/keyspaces" count={keyspaces.length} />
    52                      </li>
    53                      <li>
    54                          <NavRailLink hotkey="S" text="Schemas" to="/schemas" count={tds.length} />
    55                      </li>
    56                      <li>
    57                          <NavRailLink hotkey="T" text="Tablets" to="/tablets" count={tablets.length} />
    58                      </li>
    59                      <li>
    60                          <NavRailLink hotkey="V" text="vtctlds" to="/vtctlds" count={vtctlds.length} />
    61                      </li>
    62                      <li>
    63                          <NavRailLink hotkey="W" text="Workflows" to="/workflows" count={workflows.length} />
    64                      </li>
    65                  </ul>
    66  
    67                  <ul className={style.navList}>
    68                      <li>
    69                          <NavRailLink icon={Icons.download} text="Backups" to="/backups" />
    70                      </li>
    71                      <li>
    72                          <NavRailLink icon={Icons.runQuery} text="VTExplain" to="/vtexplain" />
    73                      </li>
    74                      <li>
    75                          <NavRailLink icon={Icons.topology} text="Topology" to="/topology" />
    76                      </li>
    77                  </ul>
    78              </div>
    79          </div>
    80      );
    81  };
    82  
    83  interface LinkProps {
    84      count?: number;
    85      hotkey?: string;
    86      icon?: Icons;
    87      text: string;
    88      to: string;
    89  }
    90  
    91  const NavRailLink = ({ count, hotkey, icon, text, to }: LinkProps) => {
    92      return (
    93          <NavLink activeClassName={style.navLinkActive} className={style.navLink} to={to}>
    94              {icon && <Icon className={style.icon} icon={icon} />}
    95              {hotkey && !icon && <div className={style.hotkey} data-hotkey={hotkey.toUpperCase()} />}
    96              <div className="ml-4">{text}</div>
    97              {typeof count === 'number' && <div className={style.badge}>{count}</div>}
    98          </NavLink>
    99      );
   100  };