Adding Tenants, Instances, Tables, Segments count tiles and their respective pages

pinot-controller/src/main/resources/app/components/Breadcrumbs.tsx

@@ -47,6 +47,11 @@ const LinkRouter = (props: LinkRouterProps) => (
 
 const breadcrumbNameMap: { [key: string]: string } = {
   '/': 'Home',
+  '/tenants': 'Tenants',
+  '/controllers': 'Controllers',
+  '/brokers': 'Brokers',
+  '/servers': 'Servers',
+  '/tables': 'Tables',
   '/query': 'Query Console',
   '/cluster': 'Cluster Manager',
   '/zookeeper': 'Zookeeper Browser'

pinot-controller/src/main/resources/app/components/Header.tsx

@@ -34,10 +34,10 @@ const Header = ({ highlightSidebarLink, showHideSideBarHandler, openSidebar, ...
   <AppBar position="static">
     <Box display="flex">
       <Box textAlign="center" marginY="12.5px" width={openSidebar ? 250 : 90} borderRight="1px solid rgba(255,255,255,0.5)">
-        <Link to="/"><Logo onClick={() => highlightSidebarLink(1)} fulllogo={openSidebar.toString()} /></Link>
+        <Link to="/" style={{color: '#ffffff'}}><Logo onClick={() => highlightSidebarLink(1)} fulllogo={openSidebar.toString()} /></Link>
       </Box>
       <Box display="flex" alignItems="center">
-        <Box marginY="auto" padding="0.25rem 0 0.25rem 1.5rem" display="flex">
+        <Box marginY="auto" padding="0.25rem 0 0.25rem 1.5rem" display="flex" style={{cursor: 'pointer'}}>
           <MenuIcon onClick={() => showHideSideBarHandler()} />
         </Box>
         <BreadcrumbsComponent {...props}/>

pinot-controller/src/main/resources/app/components/Homepage/InstanceTable.tsx

@@ -25,7 +25,7 @@ import PinotMethodUtils from '../../utils/PinotMethodUtils';
 
 type Props = {
   name: string,
-  instances: string[],
+  instances: Array<String>,
   clusterName: string
 };
 

pinot-controller/src/main/resources/app/components/Homepage/InstancesTables.tsx

@@ -17,42 +17,16 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, {  } from 'react';
 import map from 'lodash/map';
-import AppLoader from '../AppLoader';
 import InstanceTable from './InstanceTable';
-import PinotMethodUtils from '../../utils/PinotMethodUtils';
 
-type DataTable = {
-  [name: string]: string[]
-};
-
-const Instances = () => {
-  const [fetching, setFetching] = useState(true);
-  const [instances, setInstances] = useState<DataTable>();
-  const [clusterName, setClusterName] = useState('');
-
-  const fetchData = async () => {
-    const result = await PinotMethodUtils.getAllInstances();
-    let clusterNameRes = localStorage.getItem('pinot_ui:clusterName');
-    if(!clusterNameRes){
-      clusterNameRes = await PinotMethodUtils.getClusterName();
-    }
-    setInstances(result);
-    setClusterName(clusterNameRes);
-    setFetching(false);
-  };
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  return fetching ? (
-    <AppLoader />
-  ) : (
+const Instances = ({instances, clusterName}) => {
+  return (
     <>
       {
         map(instances, (value, key) => {
-          return <InstanceTable key={key} name={key} instances={value} clusterName={clusterName} />;
+          return <InstanceTable key={key} name={`${key}s`} instances={value} clusterName={clusterName} />;
         })
       }
     </>

pinot-controller/src/main/resources/app/components/Homepage/TenantsTable.tsx → pinot-controller/src/main/resources/app/components/Homepage/TenantsListing.tsx

@@ -17,31 +17,15 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
-import { TableData } from 'Models';
-import AppLoader from '../AppLoader';
+import React from 'react';
 import CustomizedTables from '../Table';
-import PinotMethodUtils from '../../utils/PinotMethodUtils';
 
-const TenantsTable = () => {
-  const [fetching, setFetching] = useState(true);
-  const [tableData, setTableData] = useState<TableData>({ records: [], columns: [] });
-
-  const fetchData = async () => {
-    const result = await PinotMethodUtils.getTenantsData();
-    setTableData(result);
-    setFetching(false);
-  };
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  return fetching ? (
-    <AppLoader />
-  ) : (
+const TenantsTable = ({tenantsData}) => {
+
+  return (
     <CustomizedTables
       title="Tenants"
-      data={tableData}
+      data={tenantsData}
       addLinks
       isPagination
       baseURL="/tenants/"

pinot-controller/src/main/resources/app/components/Table.tsx

@@ -49,19 +49,20 @@ import TableToolbar from './TableToolbar';
 import SimpleAccordion from './SimpleAccordion';
 
 type Props = {
-  title?: string;
-  data: TableData;
-  noOfRows?: number;
-  addLinks?: boolean;
-  isPagination?: boolean;
+  title?: string,
+  data: TableData,
+  noOfRows?: number,
+  addLinks?: boolean,
+  isPagination?: boolean,
   cellClickCallback?: Function,
   isCellClickable?: boolean,
   highlightBackground?: boolean,
-  isSticky?: boolean
+  isSticky?: boolean,
   baseURL?: string,
   recordsCount?: number,
   showSearchBox: boolean,
-  inAccordionFormat?: boolean
+  inAccordionFormat?: boolean,
+  regexReplace?: boolean
 };
 
 const StyledTableRow = withStyles((theme) =>
@@ -140,7 +141,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
   },
   link: {
-    color: 'inherit',
+    color: '#4285f4',
   },
   spacer: {
     flex: '0 1 auto',
@@ -249,7 +250,8 @@ export default function CustomizedTables({
   baseURL,
   recordsCount,
   showSearchBox,
-  inAccordionFormat
+  inAccordionFormat,
+  regexReplace
 }: Props) {
   const [finalData, setFinalData] = React.useState(Utils.tableFormat(data));
 
@@ -382,12 +384,18 @@ export default function CustomizedTables({
                   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   .map((row, index) => (
                     <StyledTableRow key={index} hover>
-                      {Object.values(row).map((cell, idx) =>
-                        addLinks && !idx ? (
+                      {Object.values(row).map((cell, idx) =>{
+                        let url = baseURL;
+                        if(regexReplace){
+                          let regex = /\:.*?:/;
+                          let matches = baseURL.match(regex);
+                          url = baseURL.replace(matches[0], row[matches[0].replace(/:/g, '')]);
+                        }
+                        return addLinks && !idx ? (
                           <StyledTableCell key={idx}>
                             <NavLink
                               className={classes.link}
-                              to={`${baseURL}${cell}`}
+                              to={`${url}${cell}`}
                             >
                               {cell}
                             </NavLink>
@@ -401,7 +409,7 @@ export default function CustomizedTables({
                             {styleCell(cell.toString())}
                           </StyledTableCell>
                         )
-                      )}
+                      })}
                     </StyledTableRow>
                   ))
               )}

pinot-controller/src/main/resources/app/interfaces/types.d.ts

@@ -20,7 +20,7 @@
 declare module 'Models' {
   export type TableData = {
     records: Array<Array<string | number | boolean>>;
-    columns: string[];
+    columns: Array<string>;
   };
 
   export type Tenants = {
@@ -117,4 +117,15 @@ declare module 'Models' {
 
   export type ZKConfig = Object;
   export type ZKOperationResponsne = any;
+
+  export type DataTable = {
+    [name: string]: Array<string>
+  };
+
+  export type BrokerList = Array<string>;
+
+  export type ServerList = {
+    ServerInstances: Array<string>,
+    tenantName: string
+  }
 }

pinot-controller/src/main/resources/app/pages/HomePage.tsx

@@ -17,17 +17,129 @@
  * under the License.
  */
 
-import * as React from 'react';
-import { Grid } from '@material-ui/core';
-import TenantsTable from '../components/Homepage/TenantsTable';
+import React, {useState, useEffect} from 'react';
+import { Grid, makeStyles, Paper } from '@material-ui/core';
+import { TableData, DataTable } from 'Models';
+import AppLoader from '../components/AppLoader';
+import PinotMethodUtils from '../utils/PinotMethodUtils';
+import TenantsListing from '../components/Homepage/TenantsListing';
 import Instances from '../components/Homepage/InstancesTables';
 import ClusterConfig from '../components/Homepage/ClusterConfig';
+import { Link } from 'react-router-dom';
+
+const useStyles = makeStyles((theme) => ({
+  paper:{
+    padding: '10px 0',
+    color: '#4285f4',
+    borderRadius: 4,
+    marginBottom: 15,
+    textAlign: 'center',
+    backgroundColor: 'rgba(66, 133, 244, 0.1)',
+    borderColor: 'rgba(66, 133, 244, 0.5)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    '& h2, h4': {
+      margin: 0,
+    },
+    '& h4':{
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      fontWeight: 600
+    },
+    '&:hover': {
+      borderColor: '#4285f4'
+    }
+  },
+  gridContainer: {
+    padding: 20,
+    backgroundColor: 'white',
+    maxHeight: 'calc(100vh - 70px)',
+    overflowY: 'auto'
+  },
+  paperLinks: {
+    textDecoration: 'none'
+  }
+}));
 
 const HomePage = () => {
-  return (
-    <Grid item xs style={{ padding: 20, backgroundColor: 'white', maxHeight: 'calc(100vh - 70px)', overflowY: 'auto' }}>
-      <TenantsTable />
-      <Instances />
+  const classes = useStyles();
+
+  const [fetching, setFetching] = useState(true);
+  const [tenantsData, setTenantsData] = useState<TableData>({ records: [], columns: [] });
+  const [instances, setInstances] = useState<DataTable>();
+  const [clusterName, setClusterName] = useState('');
+  const [tables, setTables] = useState([]);
+
+  const fetchData = async () => {
+    const tenantsDataResponse = await PinotMethodUtils.getTenantsData();
+    const instanceResponse = await PinotMethodUtils.getAllInstances();
+    const tablesResponse = await PinotMethodUtils.getQueryTablesList({bothType: true});
+    const tablesList = [];
+    tablesResponse.records.map((record)=>{
+      tablesList.push(...record);
+    });
+    setTenantsData(tenantsDataResponse);
+    setInstances(instanceResponse);
+    setTables(tablesList);
+    let clusterNameRes = localStorage.getItem('pinot_ui:clusterName');
+    if(!clusterNameRes){
+      clusterNameRes = await PinotMethodUtils.getClusterName();
+    }
+    setClusterName(clusterNameRes);
+    setFetching(false);
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return fetching ? (
+    <AppLoader />
+  ) : (
+    <Grid item xs className={classes.gridContainer}>
+      <Grid container spacing={3}>
+        <Grid item xs={2}>
+          <Link to="/tenants" className={classes.paperLinks}>
+            <Paper className={classes.paper}>
+              <h4>Tenants</h4>
+              <h2>{tenantsData.records.length}</h2>
+            </Paper>
+          </Link>
+        </Grid>
+        <Grid item xs={2}>
+          <Link to="/controllers" className={classes.paperLinks}>
+            <Paper className={classes.paper}>
+              <h4>Controllers</h4>
+              <h2>{instances.Controller.length}</h2>
+            </Paper>
+          </Link>
+        </Grid>
+        <Grid item xs={2}>
+          <Link to="/brokers" className={classes.paperLinks}>
+            <Paper className={classes.paper}>
+              <h4>Brokers</h4>
+              <h2>{instances.Broker.length}</h2>
+            </Paper>
+          </Link>
+        </Grid>
+        <Grid item xs={2}>
+          <Link to="/servers" className={classes.paperLinks}>
+            <Paper className={classes.paper}>
+              <h4>Servers</h4>
+              <h2>{instances.Server.length}</h2>
+            </Paper>
+          </Link>
+        </Grid>
+        <Grid item xs={2}>
+          <Link to="/tables" className={classes.paperLinks}>
+            <Paper className={classes.paper}>
+              <h4>Tables</h4>
+              <h2>{tables.length}</h2>
+            </Paper>
+          </Link>
+        </Grid>
+      </Grid>
+      <TenantsListing tenantsData={tenantsData}/>
+      <Instances instances={instances} clusterName={clusterName}/>
       <ClusterConfig />
     </Grid>
   );