You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ne...@apache.org on 2020/12/09 16:46:28 UTC
[incubator-pinot] branch master updated: Added proper tooltips,
ability to enable-disable table state and fixed page crash on
reload status (#6327)
This is an automated email from the ASF dual-hosted git repository.
nehapawar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new d6484f6 Added proper tooltips, ability to enable-disable table state and fixed page crash on reload status (#6327)
d6484f6 is described below
commit d6484f621d5931e326cfde00e022118829ee3971
Author: Sanket Shah <sh...@users.noreply.github.com>
AuthorDate: Wed Dec 9 22:16:15 2020 +0530
Added proper tooltips, ability to enable-disable table state and fixed page crash on reload status (#6327)
---
.../main/resources/app/components/Breadcrumbs.tsx | 6 +
.../src/main/resources/app/components/Confirm.tsx | 2 +-
.../main/resources/app/components/CustomDialog.tsx | 2 +-
.../Homepage/Operations/AddDeleteComponent.tsx | 5 +-
.../Homepage/Operations/AddIndexingComponent.tsx | 1 +
.../Homepage/Operations/AddIngestionComponent.tsx | 6 +-
.../Homepage/Operations/AddOfflineTableOp.tsx | 1 +
.../Homepage/Operations/AddPartionComponent.tsx | 6 +-
.../Homepage/Operations/AddQueryComponent.tsx | 4 +-
.../Operations/AddRealTimeIngestionComponent.tsx | 27 ++--
.../Operations/AddRealTimePartionComponent.tsx | 6 +-
.../Operations/AddRealtimeTableComponent.tsx | 174 ---------------------
.../Homepage/Operations/AddRealtimeTableOp.tsx | 1 +
.../components/Homepage/Operations/AddSchemaOp.tsx | 7 +-
.../Homepage/Operations/AddStorageComponent.tsx | 9 +-
.../Homepage/Operations/AddTableComponent.tsx | 7 +-
.../Homepage/Operations/AddTenantComponent.tsx | 7 +-
.../Homepage/Operations/MultiIndexingComponent.tsx | 10 +-
.../Operations/MultipleSelectComponent.tsx | 7 +-
.../Homepage/Operations/RebalanceServerTableOp.tsx | 5 +-
.../Homepage/Operations/ReloadStatusOp.tsx | 86 +++++-----
.../resources/app/components/SimpleAccordion.tsx | 12 +-
.../src/main/resources/app/components/Table.tsx | 39 +++--
.../main/resources/app/pages/InstanceDetails.tsx | 9 +-
.../main/resources/app/pages/SegmentDetails.tsx | 2 +-
.../main/resources/app/pages/TablesListingPage.tsx | 15 +-
.../src/main/resources/app/pages/TenantDetails.tsx | 45 ++++--
.../src/main/resources/app/pages/Tenants.tsx | 17 +-
.../src/main/resources/app/requests/index.ts | 3 +
pinot-controller/src/main/resources/app/router.tsx | 1 +
.../src/main/resources/app/styles/styles.css | 4 +
.../main/resources/app/utils/PinotMethodUtils.ts | 12 +-
32 files changed, 242 insertions(+), 296 deletions(-)
diff --git a/pinot-controller/src/main/resources/app/components/Breadcrumbs.tsx b/pinot-controller/src/main/resources/app/components/Breadcrumbs.tsx
index db05202..c84668b 100644
--- a/pinot-controller/src/main/resources/app/components/Breadcrumbs.tsx
+++ b/pinot-controller/src/main/resources/app/components/Breadcrumbs.tsx
@@ -108,6 +108,12 @@ const BreadcrumbsComponent = ({ ...props }) => {
)
);
}
+ if((tableName && segmentName && !tenantName && !instanceName)){
+ breadcrumbs.push(
+ getClickableLabel('Tables', '/tables'),
+ getClickableLabel(tableName, `/tenants/table/${tableName}`),
+ );
+ }
if(paramsKeys.length === 1 && tableName){
breadcrumbs.push(
getClickableLabel('Tables', '/tables')
diff --git a/pinot-controller/src/main/resources/app/components/Confirm.tsx b/pinot-controller/src/main/resources/app/components/Confirm.tsx
index 1b4d18c..6b9f93a 100644
--- a/pinot-controller/src/main/resources/app/components/Confirm.tsx
+++ b/pinot-controller/src/main/resources/app/components/Confirm.tsx
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
type Props = {
openDialog: boolean,
- dialogTitle?: string,
+ dialogTitle?: any,
dialogContent: string,
successCallback: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
closeDialog: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
diff --git a/pinot-controller/src/main/resources/app/components/CustomDialog.tsx b/pinot-controller/src/main/resources/app/components/CustomDialog.tsx
index 662d5c1..912a0b1 100644
--- a/pinot-controller/src/main/resources/app/components/CustomDialog.tsx
+++ b/pinot-controller/src/main/resources/app/components/CustomDialog.tsx
@@ -46,7 +46,7 @@ type Props = {
open: boolean,
handleClose: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
handleSave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
- title: string,
+ title: any,
children: any,
btnCancelText?: string,
btnOkText?: string,
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddDeleteComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddDeleteComponent.tsx
index c1d5571..61f67d3 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddDeleteComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddDeleteComponent.tsx
@@ -18,11 +18,12 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button, Tooltip} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import ClearIcon from '@material-ui/icons/Clear';
import DeleteIcon from '@material-ui/icons/Delete';
+import InfoIcon from '@material-ui/icons/Info';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -112,7 +113,9 @@ export default function AddDeleteComponent({
return (
<Grid container>
+ <Tooltip title="Configure the properties of your stream." arrow placement="top">
<h3 className="accordion-subtitle">Stream Config</h3>
+ </Tooltip>
{
keys.map((o,i)=>{
return(
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIndexingComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIndexingComponent.tsx
index 3815264..78fd5ee 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIndexingComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIndexingComponent.tsx
@@ -150,6 +150,7 @@ export default function AddIndexingComponent({
streamConfigsObj = {{...tableDataObj.tableIndexConfig}}
textDataObj={tableDataObj.fieldConfigList ? [...tableDataObj.fieldConfigList] : []}
changeHandler = {changeHandler}
+ tableDataObj = {tableDataObj}
columnName={columnName}/>
{/* <MultiMetricComponent
key={"multiMetrix"}
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIngestionComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIngestionComponent.tsx
index 5c06fa0..f5e863d 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIngestionComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddIngestionComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme} from '@material-ui/core';
+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';
@@ -142,6 +142,7 @@ export default function AddIngestionComponent({
}
</Grid>
<Grid item xs={12}>
+ <Tooltip interactive title={(<>Filter out rows which match condition.<a target="_blank" href="https://docs.pinot.apache.org/developers/advanced/ingestion-level-transformations#filtering" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="filterFunction">Filter function</InputLabel>
<Input
@@ -150,6 +151,7 @@ export default function AddIngestionComponent({
onChange={(e)=> changeHandler('filterFunction', e.target.value)}
/>
</FormControl>
+ </Tooltip>
{
tableDataObj.tableIndexConfig.streamConfigs ?
<AddDeleteComponent
@@ -158,11 +160,13 @@ export default function AddIngestionComponent({
changeHandler = {changeHandler}/>
: null
}
+ <Tooltip interactive title={(<>Transform the data values using Groovy or other inbuilt functions.<a target="_blank" href="https://docs.pinot.apache.org/developers/advanced/ingestion-level-transformations#column-transformation" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start">
<MultipleSelectComponent
key = {"transformConfigs"}
streamConfigsObj = {tableDataObj.ingestionConfig.transformConfigs || []}
changeHandler = {changeHandler}
columnName= {columnName}/>
+ </Tooltip>
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddOfflineTableOp.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddOfflineTableOp.tsx
index 74f8f4f..afdecac 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddOfflineTableOp.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddOfflineTableOp.tsx
@@ -301,6 +301,7 @@ const checkFields = (tableObj,fields) => {
<Grid item xs={12}>
<SimpleAccordion
headerTitle="Indexing & encoding"
+ tooltipContent={<a className = {"tooltip-link"} target="_blank" href={"https://docs.pinot.apache.org/basics/indexing"}>Click here for more details</a>}
showSearchBox={false}
>
<AddIndexingComponent
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddPartionComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddPartionComponent.tsx
index d6d4559..deab732 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddPartionComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddPartionComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Chip} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Chip, Tooltip} from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -152,6 +152,7 @@ export default function AddPartionComponent({
return (
<Grid container spacing={2}>
<Grid item xs={12}>
+ <Tooltip interactive title={(<>Data has to be pre-partitioned using the same logic, when creating segments.<a href="https://docs.pinot.apache.org/operators/operating-pinot/tuning/routing#partitioning" target="_blank" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start" disableHoverListener={tableDataObj.tableType === "REALTIME"}>
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="segmentPrunerTypes">Enable partitioning</InputLabel>
<Select
@@ -164,6 +165,7 @@ export default function AddPartionComponent({
<MenuItem value={0}>False</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
{
showPartition ?
<FormControl className={classes.selectFormControl}>
@@ -213,6 +215,7 @@ export default function AddPartionComponent({
</FormControl> : null }
</Grid>
<Grid item xs={12}>
+ <Tooltip title={(<>Creates sets of servers that contain a complete set of segments.<a href="https://docs.pinot.apache.org/operators/operating-pinot/tuning/routing#replica-group-segment-assignment-and-query-routing" target="_blank" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start" interactive disableHoverListener={tableDataObj.tableType === "REALTIME"}>
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="instanceSelectorType">Enable replica groups</InputLabel>
<Select
@@ -225,6 +228,7 @@ export default function AddPartionComponent({
<MenuItem value={0}>False</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
{
tableDataObj.routing.instanceSelectorType ?
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddQueryComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddQueryComponent.tsx
index c8f08ac..654b7d0 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddQueryComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddQueryComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, Theme} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, Theme, Tooltip} from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -73,6 +73,7 @@ export default function AddQueryComponent({
type="number"
/>
</FormControl>
+ <Tooltip title="Queries exceeding this QPS will be rejected." arrow placement="top-start">
<FormControl className={classes.formControl} >
<InputLabel htmlFor="maxQueriesPerSecond">Queries Per Second</InputLabel>
<Input
@@ -83,6 +84,7 @@ export default function AddQueryComponent({
type="number"
/>
</FormControl>
+ </Tooltip>
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimeIngestionComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimeIngestionComponent.tsx
index d9fab60..5449e79 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimeIngestionComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimeIngestionComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme} from '@material-ui/core';
+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';
@@ -140,19 +140,24 @@ export default function AddRealTimeIngestionComponent({
</Select>
</FormControl> : null
}
- <FormControl className={classes.formControl}>
- <InputLabel htmlFor="filterFunction">Filter function</InputLabel>
- <Input
- id="filterFunction"
- value={tableObj.ingestionConfig.filterConfig && tableObj.ingestionConfig.filterConfig.filterFunction || ""}
- onChange={(e)=> changeHandler('filterFunction', e.target.value)}
- />
- </FormControl>
- <MultipleSelectComponent
+ <Tooltip interactive title={(<>Filter out rows which match condition.<a target="_blank" href="https://docs.pinot.apache.org/developers/advanced/ingestion-level-transformations#filtering" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start">
+ <FormControl className={classes.formControl}>
+ <InputLabel htmlFor="filterFunction">Filter function</InputLabel>
+ <Input
+ id="filterFunction"
+ value={tableObj.ingestionConfig.filterConfig && tableObj.ingestionConfig.filterConfig.filterFunction || ""}
+ onChange={(e)=> changeHandler('filterFunction', e.target.value)}
+ />
+ </FormControl>
+ </Tooltip>
+ <Tooltip interactive title={(<>Transform the data values using Groovy or other inbuilt functions.<a target="_blank" href="https://docs.pinot.apache.org/developers/advanced/ingestion-level-transformations#column-transformation" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start">
+ <MultipleSelectComponent
key = {"transformConfigs"}
streamConfigsObj = {tableDataObj.ingestionConfig.transformConfigs || []}
changeHandler = {changeHandler}
- columnName= {columnName}/>
+ columnName= {columnName}
+ />
+ </Tooltip>
{
tableDataObj.tableIndexConfig.streamConfigs ?
<AddDeleteComponent
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimePartionComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimePartionComponent.tsx
index c5126e0..a8e7830 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimePartionComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealTimePartionComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Chip} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Chip, Tooltip} from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -152,6 +152,7 @@ export default function AddRealTimePartionComponent({
return (
<Grid container spacing={2}>
<Grid item xs={12}>
+ <Tooltip interactive title="The partitioning logic in the stream should match the partitioning config in Pinot." arrow placement="top-start">
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="segmentPrunerTypes">Enable partitioning</InputLabel>
<Select
@@ -164,6 +165,7 @@ export default function AddRealTimePartionComponent({
<MenuItem value={0}>False</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
{
showPartition ?
<FormControl className={classes.selectFormControl}>
@@ -212,6 +214,7 @@ export default function AddRealTimePartionComponent({
</FormControl> : null }
</Grid>
<Grid item xs={12}>
+ <Tooltip interactive title={(<>Number of servers should be a multiple of number of replicas.<a target="_blank" href="https://docs.pinot.apache.org/basics/getting-started/frequent-questions/operations-faq#docs-internal-guid-3eddb872-7fff-0e2a-b4e3-b1b43454add3" className={"tooltip-link"}>(Click here for more details)</a></>)} arrow placement="top-start">
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="instanceSelectorType">Enable replica groups</InputLabel>
<Select
@@ -224,6 +227,7 @@ export default function AddRealTimePartionComponent({
<MenuItem value={0}>False</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableComponent.tsx
deleted file mode 100644
index 0efca0c..0000000
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableComponent.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * 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, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme} from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectFormControl: {
- margin: theme.spacing(1),
- width: 170
- },
- autoCompleteControl: {
- '& .MuiFormControl-marginNormal': {
- marginTop: 0
- }
- },
- redColor: {
- color: theme.palette.error.main
- }
- })
-);
-
-type Props = {
- tableObj: any,
- setTableObj: Function,
- dateTimeFieldSpecs: Array<any>
- disable:boolean
-};
-
-export default function AddRealtimeTableComponent({
- tableObj,
- setTableObj,
- dateTimeFieldSpecs,
- disable
-}: Props) {
- const classes = useStyles();
-
- const [tableDataObj, setTableDataObj] = useState(tableObj);
- const [dateFields, setDateFields] = useState([]);
- const [timeColumn, setTimeColumn] = useState('');
-
- const changeHandler = (fieldName, value) => {
- let newTableObj = {...tableDataObj};
- switch(fieldName){
- case 'tableName':
- newTableObj[fieldName] = value;
- newTableObj.segmentsConfig.schemaName = value;
- break;
- case 'tableType':
- newTableObj[fieldName] = value;
- break;
- case 'timeColumnName':
- setTimeColumn(value);
- newTableObj.segmentsConfig[fieldName] = value || null;
- break;
- case 'replication':
- newTableObj.segmentsConfig[fieldName] = value;
- newTableObj.segmentsConfig['replicasPerPartition'] = value;
- break;
- };
- setTableDataObj(newTableObj);
- setTableObj(newTableObj);
- };
-
- useEffect(()=>{
- setTableDataObj(tableObj);
- }, [tableObj]);
-
- useEffect(()=>{
- let newTableObj = {...tableDataObj};
- let colName = dateTimeFieldSpecs.length ? dateTimeFieldSpecs[0].name : '';
- let dateOptions = [];
- dateTimeFieldSpecs.map((field)=>{
- dateOptions.push(field.name);
- });
- setDateFields(dateOptions);
- if(!timeColumn){
- setTimeColumn(colName);
- newTableObj.segmentsConfig.timeColumnName = colName || null;
- setTableDataObj(newTableObj);
- setTableObj(newTableObj);
- } else {
- const isDatetimeColAvailable = dateTimeFieldSpecs.find((field)=>{return field.name === timeColumn;});
- if(!isDatetimeColAvailable){
- setTimeColumn(colName);
- newTableObj.segmentsConfig.timeColumnName = colName || null;
- setTableDataObj(newTableObj);
- setTableObj(newTableObj);
- }
- }
- }, [dateTimeFieldSpecs]);
-
- const requiredAstrix = <span className={classes.redColor}>*</span>;
- return (
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <FormControl className={classes.formControl}>
- <InputLabel htmlFor="tableName">Table Name {requiredAstrix}</InputLabel>
- <Input
- id="tableName"
- value={tableDataObj.tableName}
- onChange={(e)=> changeHandler('tableName', e.target.value)}
- />
- </FormControl>
-
- <FormControl className={classes.selectFormControl}>
- <InputLabel htmlFor="tableType">Table Type {requiredAstrix}</InputLabel>
- <Select
- labelId="tableType"
- id="tableType"
- value={tableDataObj.tableType}
- onChange={(e)=> changeHandler('tableType', e.target.value)}
- disabled={disable}
- >
- <MenuItem value="OFFLINE">OFFLINE</MenuItem>
- <MenuItem value="REALTIME">REALTIME</MenuItem>
- </Select>
- </FormControl>
-
- <FormControl className={classes.selectFormControl}>
- <Autocomplete
- className={classes.autoCompleteControl}
- value={timeColumn}
- options={dateFields}
- onChange={(e, value)=> changeHandler('timeColumnName', value ? value: '')}
- disableClearable={true}
- autoHighlight={true}
- renderInput={(params) => (
- <TextField
- {...params}
- label={<>Time Column Name{tableDataObj.tableType === 'REALTIME' && requiredAstrix}</>}
- margin="normal"
- />
- )}
- />
- </FormControl>
-
- <FormControl className={classes.selectFormControl}>
- <InputLabel htmlFor="replication">Replication {requiredAstrix}</InputLabel>
- <Select
- labelId="replication"
- id="replication"
- value={tableDataObj.segmentsConfig.replication}
- onChange={(e)=> changeHandler('replication', e.target.value)}
- >
- {[ ...Array(20).keys() ].map((num, index)=>(<MenuItem key={index} value={`${num+1}`}>{`${num+1}`}</MenuItem>))}
- </Select>
- </FormControl>
- </Grid>
- </Grid>
- );
-}
\ No newline at end of file
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableOp.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableOp.tsx
index 08a95c7..77ffe4b 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableOp.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddRealtimeTableOp.tsx
@@ -313,6 +313,7 @@ const checkFields = (tableObj,fields) => {
<Grid item xs={12}>
<SimpleAccordion
headerTitle="Indexing & encoding"
+ tooltipContent={<a className = {"tooltip-link"} target="_blank" href={"https://docs.pinot.apache.org/basics/indexing"}>Click here for more details</a>}
showSearchBox={false}
>
<AddIndexingComponent
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddSchemaOp.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddSchemaOp.tsx
index 72011cd..f06ace9 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddSchemaOp.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddSchemaOp.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, DialogContent, Grid, makeStyles, Theme} from '@material-ui/core';
+import { createStyles, DialogContent, Grid, makeStyles, Theme, Tooltip} from '@material-ui/core';
import Dialog from '../../CustomDialog';
import SimpleAccordion from '../../SimpleAccordion';
import SchemaComponent from './SchemaComponent';
@@ -26,8 +26,7 @@ import CustomCodemirror from '../../CustomCodemirror';
import PinotMethodUtils from '../../../utils/PinotMethodUtils';
import { NotificationContext } from '../../Notification/NotificationContext';
import _ from 'lodash';
-import SchemaNameComponent from './SchemaNameComponent';
-import CustomizedTables from '../../Table';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -154,7 +153,7 @@ export default function AddSchemaOp({
open={true}
handleClose={hideModal}
handleSave={handleSave}
- title="Add Schema"
+ title={(<>Add Schema <Tooltip interactive title={(<a className={"tooltip-link"} target="_blank" href="https://docs.pinot.apache.org/configuration-reference/schema">Click here for more details</a>)} arrow placement="top"><InfoOutlinedIcon/></Tooltip></>)}
size="xl"
disableBackdropClick={true}
disableEscapeKeyDown={true}
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddStorageComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddStorageComponent.tsx
index 37bf2b4..6fbce64 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddStorageComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddStorageComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, Theme, Tooltip} from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -70,7 +70,7 @@ export default function AddStorageComponent({
return (
<Grid container spacing={2}>
<Grid item xs={12}>
-
+ <Tooltip title="Data will be deleted after this time period." arrow placement="top-start">
<FormControl className={classes.formControl} >
<InputLabel htmlFor="retentionTimeValue">Retention Value</InputLabel>
<Input
@@ -83,7 +83,7 @@ export default function AddStorageComponent({
type="number"
/>
</FormControl>
-
+ </Tooltip>
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="retentionTimeUnit">Retention unit</InputLabel>
<Select
@@ -99,7 +99,7 @@ export default function AddStorageComponent({
<MenuItem value="DAYS">DAYS</MenuItem>
</Select>
</FormControl>
-
+ <Tooltip title="Data pushes which exceed this size will fail." arrow placement="top-start">
<FormControl className={classes.formControl} >
<InputLabel htmlFor="maxQueriesPerSecond">Storage Quota</InputLabel>
<Input
@@ -111,6 +111,7 @@ export default function AddStorageComponent({
}
/>
</FormControl>
+ </Tooltip>
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTableComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTableComponent.tsx
index 13de6c9..6391bec 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTableComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTableComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, Tooltip} from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';
const useStyles = makeStyles((theme: Theme) =>
@@ -138,6 +138,7 @@ export default function AddTableComponent({
<MenuItem value="REALTIME">REALTIME</MenuItem>
</Select>
</FormControl>
+ <Tooltip title="Pick a primary time column from all the DateTime columns" arrow placement="top-start">
<FormControl className={classes.selectFormControl}>
<Autocomplete
className={classes.autoCompleteControl}
@@ -155,7 +156,8 @@ export default function AddTableComponent({
)}
/>
</FormControl>
-
+ </Tooltip>
+ <Tooltip title="Number of copies to create per segment" arrow placement="top-start">
<FormControl className={classes.selectFormControl}>
<InputLabel htmlFor="replication">Replication</InputLabel>
<Select
@@ -167,6 +169,7 @@ export default function AddTableComponent({
{[ ...Array(20).keys() ].map((num, index)=>(<MenuItem key={index} value={`${num+1}`}>{`${num+1}`}</MenuItem>))}
</Select>
</FormControl>
+ </Tooltip>
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTenantComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTenantComponent.tsx
index f92bddc..d359228 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTenantComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/AddTenantComponent.tsx
@@ -18,8 +18,9 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, Tooltip} from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';
+import InfoIcon from '@material-ui/icons/Info';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -158,6 +159,7 @@ export default function AddTenantComponent({
</Select>
</FormControl>
{ showRealtimeCompleted ?
+ <Tooltip interactive title={(<><a href="https://docs.pinot.apache.org/operators/operating-pinot/tuning/realtime#moving-completed-segments-to-different-hosts" target="_blank" className={"tooltip-link"}>Click here for more details</a></>)} arrow placement="top-start">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="realtimeCompleted">Relocate to tag</InputLabel>
<Input
@@ -165,7 +167,8 @@ export default function AddTenantComponent({
value={tableDataObj.tenants.tagOverrideConfig.realtimeCompleted}
onChange={(e)=> changeHandler('showRealtimeCompleted', e.target.value)}
/>
- </FormControl> : null}
+ </FormControl>
+ </Tooltip> : null}
</Grid>
</Grid>
);
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultiIndexingComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultiIndexingComponent.tsx
index 7b3f5f5..35abc3b 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultiIndexingComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultiIndexingComponent.tsx
@@ -18,7 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button, Chip} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button, Chip, Tooltip} from '@material-ui/core';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import ClearIcon from '@material-ui/icons/Clear';
@@ -51,7 +51,8 @@ type Props = {
changeHandler: any,
streamConfigsObj: Object,
columnName:Array<string>,
- textDataObj: Array<TextObj>
+ textDataObj: Array<TextObj>,
+ tableDataObj:any
};
type TextObj = {
@@ -64,6 +65,7 @@ export default function MultiIndexingComponent({
changeHandler,
streamConfigsObj,
columnName,
+ tableDataObj,
textDataObj
}: Props) {
const classes = useStyles();
@@ -267,6 +269,7 @@ export default function MultiIndexingComponent({
</FormControl>
</Grid>
<Grid item xs={4}>
+ <Tooltip title="Select a column encoding. By default, all columns are dictionary encoded." arrow placement="top-start">
<FormControl className={classes.formControl}>
<InputLabel htmlFor={o.Encoding}>Encoding</InputLabel>
<Select
@@ -283,8 +286,10 @@ export default function MultiIndexingComponent({
<MenuItem value="heapDictionary">On Heap Dictionary</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
</Grid>
<Grid item xs={4}>
+ <Tooltip title="Select indexes to apply. By default, no indexing is applied." arrow placement="top-start">
<FormControl className={classes.formControl}>
<InputLabel htmlFor={i+"keymulti"}>Indexing</InputLabel>
<Select
@@ -312,6 +317,7 @@ export default function MultiIndexingComponent({
<MenuItem value="bloomFilter">Bloom filter</MenuItem>
</Select>
</FormControl>
+ </Tooltip>
</Grid>
<Grid item xs={1}>
<FormControl>
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultipleSelectComponent.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultipleSelectComponent.tsx
index 04fdb4d..3df3d4f 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultipleSelectComponent.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/MultipleSelectComponent.tsx
@@ -18,11 +18,12 @@
*/
import React, { useEffect, useState } from 'react';
-import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button, Chip} from '@material-ui/core';
+import { createStyles, FormControl, Grid, Input, InputLabel, makeStyles, MenuItem, Select, TextField, Theme, IconButton, Fab, Button, Chip, Tooltip} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import ClearIcon from '@material-ui/icons/Clear';
import DeleteIcon from '@material-ui/icons/Delete';
+import InfoIcon from '@material-ui/icons/Info';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -100,7 +101,9 @@ export default function AddDeleteComponent({
return (
<Grid container spacing={2}>
- <h3 className="accordion-subtitle">Transform functions</h3>
+ <Tooltip interactive title={(<>Transform the data values using Groovy or other inbuilt functions.<a className={"tooltip-link"} target="_blank" href={"https://docs.pinot.apache.org/developers/advanced/ingestion-level-transformations#column-transformation"}>(Click here for more details)</a></>)} arrow placement="top">
+ <h3 className="accordion-subtitle">Transform functions</h3>
+ </Tooltip>
{
streamConfigObj.map((o,i)=>{
return(
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/RebalanceServerTableOp.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/RebalanceServerTableOp.tsx
index fb882a1..b07f423 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/RebalanceServerTableOp.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/RebalanceServerTableOp.tsx
@@ -18,10 +18,11 @@
*/
import React from 'react';
-import { DialogContent, DialogContentText, FormControl, FormControlLabel, Grid, Input, InputLabel, Switch} from '@material-ui/core';
+import { DialogContent, DialogContentText, FormControl, FormControlLabel, Grid, Input, InputLabel, Switch, Tooltip} from '@material-ui/core';
import Dialog from '../../CustomDialog';
import PinotMethodUtils from '../../../utils/PinotMethodUtils';
import CustomCodemirror from '../../CustomCodemirror';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
type Props = {
tableType: string,
@@ -61,7 +62,7 @@ export default function RebalanceServerTableOp({
<Dialog
open={true}
handleClose={hideModal}
- title="Rebalance Server"
+ title={(<>Rebalance Server <Tooltip interactive title={(<a className={"tooltip-link"} target="_blank" href="https://docs.pinot.apache.org/operators/operating-pinot/rebalance/rebalance-servers">Click here for more details</a>)} arrow placement="top"><InfoOutlinedIcon/></Tooltip></>)}
handleSave={handleSave}
showOkBtn={!rebalanceResponse}
>
diff --git a/pinot-controller/src/main/resources/app/components/Homepage/Operations/ReloadStatusOp.tsx b/pinot-controller/src/main/resources/app/components/Homepage/Operations/ReloadStatusOp.tsx
index 47aa779..3535904 100644
--- a/pinot-controller/src/main/resources/app/components/Homepage/Operations/ReloadStatusOp.tsx
+++ b/pinot-controller/src/main/resources/app/components/Homepage/Operations/ReloadStatusOp.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
-import { CircularProgress, createStyles, DialogContent, makeStyles, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Theme, withStyles} from '@material-ui/core';
+import { CircularProgress, createStyles, DialogContent, DialogContentText, makeStyles, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Theme, withStyles} from '@material-ui/core';
import Dialog from '../../CustomDialog';
import CloseIcon from '@material-ui/icons/Close';
import CheckIcon from '@material-ui/icons/Check';
@@ -63,7 +63,7 @@ export default function ReloadStatusOp({
const segmentNames = data && Object.keys(data);
const indexes = data && data[segmentNames[0]]?.indexes;
const indexesKeys = indexes && Object.keys(indexes);
- const indexObjKeys = indexes && indexes[indexesKeys[0]] && Object.keys(indexes[indexesKeys[0]]);
+ const indexObjKeys = indexes && indexes[indexesKeys[0]] && Object.keys(indexes[indexesKeys[0]]) || [];
return (
<Dialog
open={true}
@@ -76,47 +76,51 @@ export default function ReloadStatusOp({
<div className={classes.root}><CircularProgress/></div>
:
<DialogContent>
- <TableContainer component={Paper} className={classes.container}>
- <Table stickyHeader aria-label="sticky table" size="small">
- <TableHead>
- <TableRow>
- <StyledTableCell></StyledTableCell>
- {indexObjKeys.map((o, i)=>{
+ {indexes && indexesKeys && indexObjKeys ?
+ <TableContainer component={Paper} className={classes.container}>
+ <Table stickyHeader aria-label="sticky table" size="small">
+ <TableHead>
+ <TableRow>
+ <StyledTableCell></StyledTableCell>
+ {indexObjKeys.map((o, i)=>{
+ return (
+ <StyledTableCell key={i} align="right">{o}</StyledTableCell>
+ );
+ })}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {indexesKeys.map((indexName, i) => {
+ const indexObj = indexes[indexName];
return (
- <StyledTableCell key={i} align="right">{o}</StyledTableCell>
- );
+ <TableRow key={i}>
+ <StyledTableCell component="th" scope="row">
+ {indexName}
+ </StyledTableCell>
+ {indexObjKeys.map((o, i)=>{
+ let iconElement = null;
+ if(indexObj[o].toLowerCase() === 'yes'){
+ iconElement = <CheckIcon className={classes.greenColor}/>;
+ } else if(indexObj[o].toLowerCase() === 'no'){
+ iconElement = <CloseIcon className={classes.redColor}/>;
+ } else {
+ iconElement = indexObj[o];
+ }
+ return (
+ <StyledTableCell align="center" key={i}>
+ {iconElement}
+ </StyledTableCell>
+ )
+ })}
+ </TableRow>
+ )
})}
- </TableRow>
- </TableHead>
- <TableBody>
- {indexesKeys.map((indexName, i) => {
- const indexObj = indexes[indexName];
- return (
- <TableRow key={i}>
- <StyledTableCell component="th" scope="row">
- {indexName}
- </StyledTableCell>
- {indexObjKeys.map((o, i)=>{
- let iconElement = null;
- if(indexObj[o].toLowerCase() === 'yes'){
- iconElement = <CheckIcon className={classes.greenColor}/>;
- } else if(indexObj[o].toLowerCase() === 'no'){
- iconElement = <CloseIcon className={classes.redColor}/>;
- } else {
- iconElement = indexObj[o];
- }
- return (
- <StyledTableCell align="center" key={i}>
- {iconElement}
- </StyledTableCell>
- )
- })}
- </TableRow>
- )
- })}
- </TableBody>
- </Table>
- </TableContainer>
+ </TableBody>
+ </Table>
+ </TableContainer>
+ :
+ <DialogContentText>No segment found in table.</DialogContentText>
+ }
</DialogContent>
}
</Dialog>
diff --git a/pinot-controller/src/main/resources/app/components/SimpleAccordion.tsx b/pinot-controller/src/main/resources/app/components/SimpleAccordion.tsx
index c8e10d8..2cdafa8 100644
--- a/pinot-controller/src/main/resources/app/components/SimpleAccordion.tsx
+++ b/pinot-controller/src/main/resources/app/components/SimpleAccordion.tsx
@@ -25,7 +25,7 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SearchBar from './SearchBar';
-import { FormControlLabel, Switch } from '@material-ui/core';
+import { FormControlLabel, Switch, Tooltip } from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -58,6 +58,7 @@ const useStyles = makeStyles((theme: Theme) =>
type Props = {
headerTitle: string;
+ tooltipContent?: any;
showSearchBox: boolean;
searchValue?: string;
handleSearch?: Function;
@@ -72,6 +73,7 @@ type Props = {
export default function SimpleAccordion({
headerTitle,
+ tooltipContent,
showSearchBox,
searchValue,
handleSearch,
@@ -91,7 +93,13 @@ export default function SimpleAccordion({
id={`panel1a-header-${headerTitle}`}
className={classes.root}
>
- <Typography className={classes.heading}>{`${headerTitle.toUpperCase()} ${recordCount !== undefined ? ` - (${recordCount})` : ''}`}</Typography>
+ {tooltipContent ?
+ <Tooltip interactive title={tooltipContent} arrow placement="top">
+ <Typography className={classes.heading}>{`${headerTitle.toUpperCase()} ${recordCount !== undefined ? ` - (${recordCount})` : ''}`}</Typography>
+ </Tooltip>
+ :
+ <Typography className={classes.heading}>{`${headerTitle.toUpperCase()} ${recordCount !== undefined ? ` - (${recordCount})` : ''}`}</Typography>
+ }
{accordionToggleObject &&
<FormControlLabel
className={classes.formControl}
diff --git a/pinot-controller/src/main/resources/app/components/Table.tsx b/pinot-controller/src/main/resources/app/components/Table.tsx
index 9d4e01a..8b2d17c 100644
--- a/pinot-controller/src/main/resources/app/components/Table.tsx
+++ b/pinot-controller/src/main/resources/app/components/Table.tsx
@@ -32,7 +32,7 @@ import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
-import { TablePagination } from '@material-ui/core';
+import { TablePagination, Tooltip } from '@material-ui/core';
import { TableData } from 'Models';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
@@ -67,7 +67,8 @@ type Props = {
toggleChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
toggleName: string;
toggleValue: boolean;
- }
+ },
+ tooltipData?: string[]
};
const StyledTableRow = withStyles((theme) =>
@@ -257,7 +258,8 @@ export default function CustomizedTables({
showSearchBox,
inAccordionFormat,
regexReplace,
- accordionToggleObject
+ accordionToggleObject,
+ tooltipData
}: Props) {
const [finalData, setFinalData] = React.useState(Utils.tableFormat(data));
@@ -363,18 +365,25 @@ export default function CustomizedTables({
setColumnClicked(column);
}}
>
- {column}
- {column === columnClicked ? order ? (
- <ArrowDropDownIcon
- color="primary"
- style={{ verticalAlign: 'middle' }}
- />
- ) : (
- <ArrowDropUpIcon
- color="primary"
- style={{ verticalAlign: 'middle' }}
- />
- ) : null}
+ <>
+ {
+ tooltipData && tooltipData[index] ?
+ (<Tooltip title={tooltipData[index]} placement="top" arrow><span>{column}</span></Tooltip>)
+ :
+ column
+ }
+ {column === columnClicked ? order ? (
+ <ArrowDropDownIcon
+ color="primary"
+ style={{ verticalAlign: 'middle' }}
+ />
+ ) : (
+ <ArrowDropUpIcon
+ color="primary"
+ style={{ verticalAlign: 'middle' }}
+ />
+ ) : null}
+ </>
</StyledTableCell>
))}
</TableRow>
diff --git a/pinot-controller/src/main/resources/app/pages/InstanceDetails.tsx b/pinot-controller/src/main/resources/app/pages/InstanceDetails.tsx
index cbbc423..3ec557d 100644
--- a/pinot-controller/src/main/resources/app/pages/InstanceDetails.tsx
+++ b/pinot-controller/src/main/resources/app/pages/InstanceDetails.tsx
@@ -18,7 +18,7 @@
*/
import React, { useState, useEffect } from 'react';
-import { Button, FormControlLabel, Grid, makeStyles, Switch } from '@material-ui/core';
+import { Button, FormControlLabel, Grid, makeStyles, Switch, Tooltip } from '@material-ui/core';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
@@ -292,7 +292,7 @@ const InstanceDetails = ({ match }: RouteComponentProps<Props>) => {
setTagsList(JSON.parse(instanceConfig)?.listFields?.TAG_LIST || []);
setShowEditTag(true);
}}
- tooltipTitle="Edit Tags"
+ tooltipTitle="Add/remove tags from this node"
enableTooltip={true}
>
Edit Tags
@@ -302,18 +302,18 @@ const InstanceDetails = ({ match }: RouteComponentProps<Props>) => {
setConfig(instanceDetails);
setShowEditConfig(true);
}}
- tooltipTitle="Edit Config"
enableTooltip={true}
>
Edit Config
</CustomButton>
<CustomButton
onClick={handleDropAction}
- tooltipTitle="Drop"
+ tooltipTitle="Removes the node from the cluster. Untag & rebalance (to ensure node is not being used by any table), and shutdown instance, before dropping."
enableTooltip={true}
>
Drop
</CustomButton>
+ <Tooltip title="Disabling will disable the node for queries." arrow placement="top-start" >
<FormControlLabel
control={
<Switch
@@ -325,6 +325,7 @@ const InstanceDetails = ({ match }: RouteComponentProps<Props>) => {
}
label="Enable"
/>
+ </Tooltip>
</div>
</SimpleAccordion>
</div>}
diff --git a/pinot-controller/src/main/resources/app/pages/SegmentDetails.tsx b/pinot-controller/src/main/resources/app/pages/SegmentDetails.tsx
index c2f7065..c0060f1 100644
--- a/pinot-controller/src/main/resources/app/pages/SegmentDetails.tsx
+++ b/pinot-controller/src/main/resources/app/pages/SegmentDetails.tsx
@@ -201,7 +201,7 @@ const SegmentDetails = ({ match }: RouteComponentProps<Props>) => {
</CustomButton>
<CustomButton
onClick={()=>{handleReloadSegmentClick()}}
- tooltipTitle="Reload Segment"
+ tooltipTitle="Reload the segment to apply changes such as indexing, column default values, etc"
enableTooltip={true}
>
Reload Segment
diff --git a/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx b/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
index b233057..9fe7d0a 100644
--- a/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
+++ b/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
@@ -43,6 +43,14 @@ const useStyles = makeStyles(() => ({
}
}));
+const TableTooltipData = [
+ null,
+ "Uncompressed size of all data segments",
+ "Estimated size of all data segments, in case any servers are not reachable for actual size",
+ null,
+ "GOOD if all replicas of all segments are up"
+];
+
const TablesListingPage = () => {
const classes = useStyles();
@@ -89,21 +97,21 @@ const TablesListingPage = () => {
<div>
<CustomButton
onClick={()=>{setShowSchemaModal(true)}}
- tooltipTitle="Add Schema"
+ tooltipTitle="Define the dimensions, metrics and date time columns of your data"
enableTooltip={true}
>
Add Schema
</CustomButton>
<CustomButton
onClick={()=>{setShowAddOfflineTableModal(true)}}
- tooltipTitle="Add Offline Table"
+ tooltipTitle="Create a Pinot table to ingest from batch data sources, such as S3"
enableTooltip={true}
>
Add Offline Table
</CustomButton>
<CustomButton
onClick={()=>{setShowAddRealtimeTableModal(true)}}
- tooltipTitle="Add Realtime Table"
+ tooltipTitle="Create a Pinot table to ingest from stream data sources, such as Kafka"
enableTooltip={true}
>
Add Realtime Table
@@ -119,6 +127,7 @@ const TablesListingPage = () => {
baseURL="/tenants/table/"
showSearchBox={true}
inAccordionFormat={true}
+ tooltipData={TableTooltipData}
/>
<CustomizedTables
title="Schemas"
diff --git a/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx b/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx
index 9a44eee..48f009a 100644
--- a/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx
+++ b/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx
@@ -19,7 +19,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { FormControlLabel, Grid, Switch } from '@material-ui/core';
+import { FormControlLabel, Grid, Switch, Tooltip } from '@material-ui/core';
import { RouteComponentProps, useHistory, useLocation } from 'react-router-dom';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import { TableData } from 'Models';
@@ -40,6 +40,7 @@ import RebalanceServerTableOp from '../components/Homepage/Operations/RebalanceS
import Confirm from '../components/Confirm';
import { NotificationContext } from '../components/Notification/NotificationContext';
import Utils from '../utils/Utils';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
const useStyles = makeStyles((theme) => ({
root: {
@@ -194,8 +195,15 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
const tableObj:any = result.OFFLINE || result.REALTIME;
setTableType(tableObj.tableType);
setTableConfig(JSON.stringify(result, null, 2));
+ fetchTableState(tableObj.tableType);
+ };
+
+ const fetchTableState = async (type) => {
+ const stateResponse = await PinotMethodUtils.getTableState(tableName, type);
+ setState({enabled: stateResponse.state === 'enabled'});
setFetching(false);
};
+
useEffect(() => {
fetchTableData();
}, []);
@@ -311,7 +319,6 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
};
const handleReloadStatus = async () => {
- setShowReloadStatusModal(true);
const result = await PinotMethodUtils.reloadStatusOp(tableName, tableType);
if(result.error){
setShowReloadStatusModal(false);
@@ -319,12 +326,13 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
setShowReloadStatusModal(false);
return;
}
+ setShowReloadStatusModal(true);
setReloadStatusData(result);
};
const handleRebalanceBrokers = () => {
setDialogDetails({
- title: 'Rebalance brokers',
+ title: (<>Rebalance brokers <Tooltip interactive title={(<a className={"tooltip-link"} target="_blank" href="https://docs.pinot.apache.org/operators/operating-pinot/rebalance/rebalance-brokers">Click here for more details</a>)} arrow placement="top"><InfoOutlinedIcon/></Tooltip></>),
content: 'Are you sure want to rebalance the brokers?',
successCb: () => rebalanceBrokers()
});
@@ -405,32 +413,33 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
</CustomButton>
<CustomButton
onClick={handleReloadSegments}
- tooltipTitle="Reload All Segments"
+ tooltipTitle="Reloads all segments of the table to apply changes such as indexing, column default values, etc"
enableTooltip={true}
>
Reload All Segments
</CustomButton>
<CustomButton
onClick={handleReloadStatus}
- tooltipTitle="Reload Status"
+ tooltipTitle="The status of all indexes for each column"
enableTooltip={true}
>
Reload Status
</CustomButton>
<CustomButton
onClick={()=>{setShowRebalanceServerModal(true);}}
- tooltipTitle="Rebalance Servers"
+ tooltipTitle="Recalculates the segment to server mapping for this table"
enableTooltip={true}
>
Rebalance Servers
</CustomButton>
<CustomButton
onClick={handleRebalanceBrokers}
- tooltipTitle="Rebalance Brokers"
+ tooltipTitle="Rebuilds brokerResource mapping for this table"
enableTooltip={true}
>
Rebalance Brokers
</CustomButton>
+ <Tooltip title="Disabling will disable the table for queries, consumption and data push" arrow placement="top">
<FormControlLabel
control={
<Switch
@@ -438,11 +447,11 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
onChange={handleSwitchChange}
name="enabled"
color="primary"
- disabled={true}
/>
}
label="Enable"
/>
+ </Tooltip>
</div>
</SimpleAccordion>
</div>
@@ -452,13 +461,19 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
<Grid item xs={4}>
<strong>Table Name:</strong> {tableSummary.tableName}
</Grid>
- <Grid item xs={4}>
+ <Tooltip title="Uncompressed size of all data segments" arrow placement="top-start">
+ <Grid item xs={2}>
<strong>Reported Size:</strong> {tableSummary.reportedSize}
</Grid>
- <Grid item xs={4}>
- <strong>Estimated Size: </strong>
- {tableSummary.estimatedSize}
- </Grid>
+ </Tooltip>
+ <Grid item xs={2}></Grid>
+ <Tooltip title="Estimated size of all data segments, in case any servers are not reachable for actual size" arrow placement="top-start">
+ <Grid item xs={2}>
+ <strong>Estimated Size: </strong>
+ {tableSummary.estimatedSize}
+ </Grid>
+ </Tooltip>
+ <Grid item xs={2}></Grid>
</Grid>
</div>
@@ -483,7 +498,9 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
isPagination={false}
noOfRows={segmentList.records.length}
baseURL={
- tenantName ? `/tenants/${tenantName}/table/${tableName}/` : `/instance/${instanceName}/table/${tableName}/`
+ tenantName && `/tenants/${tenantName}/table/${tableName}/` ||
+ instanceName && `/instance/${instanceName}/table/${tableName}/` ||
+ `/tenants/table/${tableName}/`
}
addLinks
showSearchBox={true}
diff --git a/pinot-controller/src/main/resources/app/pages/Tenants.tsx b/pinot-controller/src/main/resources/app/pages/Tenants.tsx
index 33286de..ab3e0de 100644
--- a/pinot-controller/src/main/resources/app/pages/Tenants.tsx
+++ b/pinot-controller/src/main/resources/app/pages/Tenants.tsx
@@ -39,6 +39,14 @@ type Props = {
tenantName: string
};
+const TableTooltipData = [
+ null,
+ "Uncompressed size of all data segments",
+ "Estimated size of all data segments, in case any servers are not reachable for actual size",
+ null,
+ "GOOD if all replicas of all segments are up"
+];
+
const TenantPage = ({ match }: RouteComponentProps<Props>) => {
const {tenantName} = match.params;
@@ -77,16 +85,16 @@ const TenantPage = ({ match }: RouteComponentProps<Props>) => {
<div>
<CustomButton
onClick={()=>{console.log('rebalance');}}
- // tooltipTitle="Rebalance Server Tenant - Coming soon"
- // enableTooltip={true}
+ tooltipTitle="Recalculates the segment to server mapping for all tables in this tenant"
+ enableTooltip={true}
isDisabled={true}
>
Rebalance Server Tenant
</CustomButton>
<CustomButton
onClick={()=>{console.log('rebuild');}}
- // tooltipTitle="Rebuild Broker Resource - Coming soon"
- // enableTooltip={true}
+ tooltipTitle="Rebuilds brokerResource mappings for all tables in this tenant"
+ enableTooltip={true}
isDisabled={true}
>
Rebuild Broker Resource
@@ -97,6 +105,7 @@ const TenantPage = ({ match }: RouteComponentProps<Props>) => {
<CustomizedTables
title={tenantName}
data={tableData}
+ tooltipData={TableTooltipData}
isPagination
addLinks
baseURL={`/tenants/${tenantName}/table/`}
diff --git a/pinot-controller/src/main/resources/app/requests/index.ts b/pinot-controller/src/main/resources/app/requests/index.ts
index 26249f5..8fdcb1f 100644
--- a/pinot-controller/src/main/resources/app/requests/index.ts
+++ b/pinot-controller/src/main/resources/app/requests/index.ts
@@ -161,3 +161,6 @@ export const saveSchema = (schemaObject: string): Promise<AxiosResponse<Operatio
export const saveTable = (tableObject: string): Promise<AxiosResponse<OperationResponse>> =>
baseApi.post(`/tables`, JSON.stringify(tableObject), {headers});
+
+export const getState = (tableName: string, tableType: string): Promise<AxiosResponse<OperationResponse>> =>
+ baseApi.get(`/tables/${tableName}/state?type=${tableType}`);
\ No newline at end of file
diff --git a/pinot-controller/src/main/resources/app/router.tsx b/pinot-controller/src/main/resources/app/router.tsx
index ebd3c77..8d02f0e 100644
--- a/pinot-controller/src/main/resources/app/router.tsx
+++ b/pinot-controller/src/main/resources/app/router.tsx
@@ -41,6 +41,7 @@ export default [
{ path: '/tenants/:tenantName/table/:tableName', Component: TenantPageDetails },
{ path: '/tenants/schema/:schemaName', Component: SchemaPageDetails },
{ path: '/tenants/table/:tableName', Component: TenantPageDetails },
+ { path: '/tenants/table/:tableName/:segmentName', Component: SegmentDetails },
{ path: '/tenants/:tenantName/table/:tableName/:segmentName', Component: SegmentDetails },
{ path: '/instance/:instanceName', Component: InstanceDetails },
{ path: '/instance/:instanceName/table/:tableName', Component: TenantPageDetails },
diff --git a/pinot-controller/src/main/resources/app/styles/styles.css b/pinot-controller/src/main/resources/app/styles/styles.css
index 7f3bb68..ffa77f4 100644
--- a/pinot-controller/src/main/resources/app/styles/styles.css
+++ b/pinot-controller/src/main/resources/app/styles/styles.css
@@ -122,4 +122,8 @@ h3.accordion-subtitle:before, h3.accordion-subtitle:after {
border: 1px #ccc solid;
border-radius: 5px;
margin: 8px;
+}
+.tooltip-link{
+ color:white;
+ font-weight: bold;
}
\ No newline at end of file
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index 592e562..6b0fc6e 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -63,7 +63,8 @@ import {
saveSchema,
saveTable,
getSchema,
- getSchemaList
+ getSchemaList,
+ getState
} from '../requests';
import Utils from './Utils';
@@ -729,6 +730,12 @@ const getSchemaData = (schemaName) => {
});
};
+const getTableState = (tableName, tableType) => {
+ return getState(tableName, tableType).then((response)=>{
+ return response.data;
+ });
+};
+
export default {
getTenantsData,
getAllInstances,
@@ -774,5 +781,6 @@ export default {
saveSchemaAction,
saveTableAction,
getSchemaData,
- getAllSchemaDetails
+ getAllSchemaDetails,
+ getTableState
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org