#8970 Minion tab in Pinot UI

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

@@ -26,7 +26,7 @@ import Link, { LinkProps } from '@material-ui/core/Link';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import Box from '@material-ui/core/Box';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import _ from 'lodash';
+import { keys } from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -55,6 +55,8 @@ const breadcrumbNameMap: { [key: string]: string } = {
   '/controllers': 'Controllers',
   '/brokers': 'Brokers',
   '/servers': 'Servers',
+  '/minions': 'Minions',
+  '/minion-task-manager': 'Minion Task Manager',
   '/tables': 'Tables',
   '/query': 'Query Console',
   '/cluster': 'Cluster Manager',
@@ -94,9 +96,9 @@ const BreadcrumbsComponent = ({ ...props }) => {
       return getLabel(breadcrumbNameMap['/']);
     }
     const breadcrumbs = [getClickableLabel(breadcrumbNameMap['/'], '/')];
-    const paramsKeys = _.keys(props.match.params);
+    const paramsKeys = keys(props.match.params);
     if(paramsKeys.length){
-      const {tenantName, tableName, segmentName, instanceName, schemaName, query} = props.match.params;
+      const {tenantName, tableName, segmentName, instanceName, schemaName, query, taskType, queueTableName, taskID, subTaskID} = props.match.params;
       if((tenantName || instanceName) && tableName){
         breadcrumbs.push(
           getClickableLabel(
@@ -129,7 +131,19 @@ const BreadcrumbsComponent = ({ ...props }) => {
           getClickableLabel('Schemas', '/tables')
         );
       }
-      breadcrumbs.push(getLabel(segmentName || tableName || tenantName || instanceName || schemaName || 'Query Console'));
+      if (taskType) {
+        breadcrumbs.push(getClickableLabel('Minion Task Manager', `/minion-task-manager`));
+      }
+      if (queueTableName) {
+        breadcrumbs.push(getClickableLabel(taskType, `/task-queue/${taskType}`));
+      }
+      if (taskID) {
+        breadcrumbs.push(getClickableLabel('Tasks', `/task-queue/${taskType}/tables/${queueTableName}`));
+      }
+      if (subTaskID) {
+        breadcrumbs.push(getClickableLabel('Sub Tasks', `/task-queue/${taskType}/tables/${queueTableName}/task/${taskID}`));
+      }
+      breadcrumbs.push(getLabel(segmentName || tableName || tenantName || instanceName || schemaName || subTaskID || taskID || queueTableName || taskType || 'Query Console'));
     } else {
       breadcrumbs.push(getLabel(breadcrumbNameMap[location.pathname]));
     }

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

@@ -63,7 +63,7 @@ type Props = {
   dialogNoLabel?: string
 };
 
-const Confirm = ({openDialog, dialogTitle, dialogContent, successCallback, closeDialog, dialogYesLabel, dialogNoLabel}: Props) => {
+const Confirm = ({openDialog, dialogTitle, dialogContent, successCallback, closeDialog, dialogYesLabel = 'Yes', dialogNoLabel = 'No'}: Props) => {
   const classes = useStyles();
   const [open, setOpen] = React.useState(openDialog);
 
@@ -103,4 +103,24 @@ const Confirm = ({openDialog, dialogTitle, dialogContent, successCallback, close
   );
 };
 
-export default Confirm;
+export default Confirm;
+
+export function useConfirm ({ dialogTitle, dialogContent, successCallback, closeDialog, dialogYesLabel, dialogNoLabel }: any) {
+  const [confirmDialog, setConfirmDialog] = React.useState(false);
+
+  return {
+    confirmDialog,
+    setConfirmDialog,
+    confirmComponent: (
+      <Confirm
+        openDialog={confirmDialog}
+        dialogTitle={dialogTitle}
+        dialogContent={dialogContent}
+        successCallback={successCallback}
+        closeDialog={() => setConfirmDialog(false)}
+        dialogYesLabel={dialogYesLabel}
+        dialogNoLabel={dialogNoLabel}
+      />
+    )
+  };
+}

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

@@ -22,7 +22,6 @@ import Chip from '@material-ui/core/Chip';
 import Autocomplete, { AutocompleteRenderInputParams } from '@material-ui/lab/Autocomplete';
 import TextField from '@material-ui/core/TextField';
 import { withStyles } from '@material-ui/core';
-import _ from 'lodash';
 
 interface MyInputProps {
   onKeyDown: (event: object) => void;

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

@@ -19,13 +19,16 @@
 
 import React, {  } from 'react';
 import map from 'lodash/map';
+import get from 'lodash/get';
 import InstanceTable from './InstanceTable';
 
 const Instances = ({instances, clusterName}) => {
+  const order = ['Controller', 'Broker', 'Server', 'Minion'];
   return (
     <>
       {
-        map(instances, (value, key) => {
+        map(order, (key) => {
+          const value = get(instances, key, '');
           return <InstanceTable key={key} name={`${key}s`} instances={value} clusterName={clusterName} />;
         })
       }

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

@@ -21,7 +21,7 @@ import React, { useEffect, useState } from 'react';
 import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Tooltip} from '@material-ui/core';
 import AddDeleteComponent from './AddDeleteComponent';
 import MultipleSelectComponent from './MultipleSelectComponent';
-import _ from 'lodash';
+import { isEmpty } from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -81,7 +81,7 @@ export default function AddIngestionComponent({
 
   useEffect(()=>{
     let newTableObj = {...tableObj};
-      if(newTableObj.tableType === "REALTIME" && !newTableObj.streamConfigs && _.isEmpty(newTableObj.streamConfigs) ){
+      if(newTableObj.tableType === "REALTIME" && !newTableObj.streamConfigs && isEmpty(newTableObj.streamConfigs) ){
         newTableObj.tableIndexConfig.streamConfigs =
         {
             "streamType": "kafka",

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

@@ -31,7 +31,7 @@ import AddIndexingComponent from './AddIndexingComponent';
 import AddPartionComponent from './AddPartionComponent';
 import AddStorageComponent from './AddStorageComponent';
 import AddQueryComponent from './AddQueryComponent';
-import _ from 'lodash';
+import { isEmpty, isArray } from 'lodash';
 import AddOfflineTenantComponent from './AddOfflineTenantComponent';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -168,10 +168,10 @@ export default function AddOfflineTableOp({
 
   const returnValue = (data,key) =>{
     Object.keys(data).map(async (o)=>{
-    if(!_.isEmpty(data[o]) && typeof data[o] === "object"){
+    if(!isEmpty(data[o]) && typeof data[o] === "object"){
         await returnValue(data[o],key);
       }
-      else if(!_.isEmpty(data[o]) && _.isArray(data[o])){
+      else if(!isEmpty(data[o]) && isArray(data[o])){
         data[o].map(async (obj)=>{
           await returnValue(obj,key);
         })
@@ -240,7 +240,7 @@ const checkFields = (tableObj,fields) => {
 
   useEffect(()=>{
     let columnName = [];
-    if(!_.isEmpty(schemaObj)){
+    if(!isEmpty(schemaObj)){
       tableNamekey.map((o)=>{
         schemaObj[o] && schemaObj[o].map((obj)=>{
           columnName.push(obj.name);

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

@@ -21,7 +21,7 @@ import React, { useEffect, useState } from 'react';
 import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Tooltip} from '@material-ui/core';
 import AddDeleteComponent from './AddDeleteComponent';
 import MultipleSelectComponent from './MultipleSelectComponent';
-import _ from 'lodash';
+import { isEmpty } from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -81,7 +81,7 @@ export default function AddRealTimeIngestionComponent({
 
   useEffect(()=>{
     let newTableObj = {...tableObj};
-      if(newTableObj.tableType === "REALTIME" && !newTableObj.tableIndexConfig.streamConfigs && _.isEmpty(newTableObj.tableIndexConfig.streamConfigs) ){
+      if(newTableObj.tableType === "REALTIME" && !newTableObj.tableIndexConfig.streamConfigs && isEmpty(newTableObj.tableIndexConfig.streamConfigs) ){
         newTableObj.tableIndexConfig.streamConfigs =
         {
             "streamType": "kafka",

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

@@ -31,7 +31,7 @@ import AddIndexingComponent from './AddIndexingComponent';
 import AddPartionComponent from './AddPartionComponent';
 import AddStorageComponent from './AddStorageComponent';
 import AddQueryComponent from './AddQueryComponent';
-import _ from 'lodash';
+import { isEmpty, isArray } from 'lodash';
 import AddRealTimeIngestionComponent from './AddRealTimeIngestionComponent';
 import AddRealTimePartionComponent from './AddRealTimePartionComponent';
 
@@ -181,10 +181,10 @@ export default function AddRealtimeTableOp({
 
   const returnValue = (data,key) =>{
     Object.keys(data).map(async (o)=>{
-    if(!_.isEmpty(data[o]) && typeof data[o] === "object"){
+    if(!isEmpty(data[o]) && typeof data[o] === "object"){
         await returnValue(data[o],key);
       }
-      else if(!_.isEmpty(data[o]) && _.isArray(data[o])){
+      else if(!isEmpty(data[o]) && isArray(data[o])){
         data[o].map(async (obj)=>{
           await returnValue(obj,key);
         })
@@ -252,7 +252,7 @@ const checkFields = (tableObj,fields) => {
 
   useEffect(()=>{
     let columnName = [];
-    if(!_.isEmpty(schemaObj)){
+    if(!isEmpty(schemaObj)){
       tableNamekey.map((o)=>{
         schemaObj[o] && schemaObj[o].map((obj)=>{
           columnName.push(obj.name);

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

@@ -25,7 +25,7 @@ import SchemaComponent from './SchemaComponent';
 import CustomCodemirror from '../../CustomCodemirror';
 import PinotMethodUtils from '../../../utils/PinotMethodUtils';
 import { NotificationContext } from '../../Notification/NotificationContext';
-import _ from 'lodash';
+import { isEmpty, isArray } from 'lodash';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -57,10 +57,10 @@ export default function AddSchemaOp({
 
     const returnValue = (data,key) =>{
         Object.keys(data).map(async (o)=>{
-          if(!_.isEmpty(data[o]) && typeof data[o] === "object"){
+          if(!isEmpty(data[o]) && typeof data[o] === "object"){
             await returnValue(data[o],key);
           }
-          else if(!_.isEmpty(data[o]) && _.isArray(data[o])){
+          else if(!isEmpty(data[o]) && isArray(data[o])){
             data[o].map(async (obj)=>{
               await returnValue(obj,key);
             })

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

@@ -23,7 +23,6 @@ import AddIcon from '@material-ui/icons/Add';
 import ClearIcon from '@material-ui/icons/Clear';
 import { Autocomplete } from '@material-ui/lab';
 import { debug } from 'webpack';
-import _ from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

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

@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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, { useState, useEffect } from 'react';
+import { TableData } from 'Models';
+import CustomizedTables from '../Table';
+import PinotMethodUtils from '../../utils/PinotMethodUtils';
+
+const useTaskTypesTable = () => {
+  const [fetching, setFetching] = useState(true);
+  const [taskTypes, setTaskTypes] = useState<TableData>({ records: [], columns: [] });
+
+  const fetchData = async () => {
+    setFetching(true);
+    const taskTypesRes = await PinotMethodUtils.getAllTaskTypes();
+    setTaskTypes(taskTypesRes);
+    setFetching(false);
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return {
+    taskTypes,
+    taskTypesTable: !fetching && (
+      <CustomizedTables
+        title="Task Queues"
+        data={taskTypes}
+        showSearchBox={true}
+        inAccordionFormat={true}
+        isPagination={false}
+        addLinks
+        baseURL='/task-queue/'
+      />
+    )
+  };
+};
+
+export default useTaskTypesTable;

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

@@ -44,7 +44,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { Link } from 'react-router-dom';
 import Chip from '@material-ui/core/Chip';
-import _ from 'lodash';
+import { get, has, orderBy } from 'lodash';
 import app_state from '../app_state';
 import Utils from '../utils/Utils';
 import TableToolbar from './TableToolbar';
@@ -383,14 +383,14 @@ export default function CustomizedTables({
 
   const makeCell = (cellData, rowIndex) => {
     if (Object.prototype.toString.call(cellData) === '[object Object]') {
-      if (_.has(cellData, 'component') && cellData.component) {
+      if (has(cellData, 'component') && cellData.component) {
 
 
         let cell = (styleCell(cellData.value))
         let statusModal = (
             <Dialog
                 onClose={handleModalClose(rowIndex)}
-                open={_.get(modalStatus, rowIndex, false)}
+                open={get(modalStatus, rowIndex, false)}
                 fullWidth={true}
                 maxWidth={'xl'}
             >
@@ -403,7 +403,7 @@ export default function CustomizedTables({
                 {onClick: handleModalOpen(rowIndex)},
             )
         );
-        if (_.has(cellData, 'tooltip') && cellData.tooltip) {
+        if (has(cellData, 'tooltip') && cellData.tooltip) {
           cell = (
               <Tooltip
                   title={cellData.tooltip}
@@ -420,7 +420,7 @@ export default function CustomizedTables({
               {statusModal}
             </>
         );
-      } else if (_.has(cellData, 'tooltip') && cellData.tooltip) {
+      } else if (has(cellData, 'tooltip') && cellData.tooltip) {
         return (
             <Tooltip
                 title={cellData.tooltip}
@@ -458,7 +458,7 @@ export default function CustomizedTables({
                         });
                         setFinalData(data);
                       } else {
-                        setFinalData(_.orderBy(finalData, column+app_state.columnNameSeparator+index, order ? 'asc' : 'desc'));
+                        setFinalData(orderBy(finalData, column+app_state.columnNameSeparator+index, order ? 'asc' : 'desc'));
                       }
                       setOrder(!order);
                       setColumnClicked(column);