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/pinot.git
The following commit(s) were added to refs/heads/master by this push:
new df44d67885 UI: show an option to reload the segments during edit
schema (#9762)
df44d67885 is described below
commit df44d678851adbe58ee265a3b245b8c66c742885
Author: Jayesh Choudhary <jayeshchoudhary...@gmail.com>
AuthorDate: Tue Nov 15 01:56:08 2022 +0530
UI: show an option to reload the segments during edit schema (#9762)
What does this PR do?
show an option to reload the segments during edit schema
Issue:
Sometimes schema update require segments to be reloaded for updated schema
to become effective.
Backend accepts a query param reload=true flag in the update schema API
that indicates whether to start reload of the table or not
Right now UI doesn't have the option to pass reload option when updating
schema.
Description:
The user should be given a choice on whether a table reload is needed or
not.
Add a checkbox (unchecked by default) that will give an option for user to
send reload flag when edting schema.
---
.../main/resources/app/pages/SchemaPageDetails.tsx | 61 ++++++++++++++++++----
.../src/main/resources/app/requests/index.ts | 11 +++-
.../main/resources/app/utils/PinotMethodUtils.ts | 4 +-
3 files changed, 62 insertions(+), 14 deletions(-)
diff --git
a/pinot-controller/src/main/resources/app/pages/SchemaPageDetails.tsx
b/pinot-controller/src/main/resources/app/pages/SchemaPageDetails.tsx
index d1e183da4a..23be997dfb 100644
--- a/pinot-controller/src/main/resources/app/pages/SchemaPageDetails.tsx
+++ b/pinot-controller/src/main/resources/app/pages/SchemaPageDetails.tsx
@@ -19,7 +19,7 @@
import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { Grid } from '@material-ui/core';
+import { Checkbox, DialogContent, FormControlLabel, Grid, IconButton, Tooltip
} from '@material-ui/core';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import { TableData } from 'Models';
@@ -31,11 +31,13 @@ import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/sql/sql';
import SimpleAccordion from '../components/SimpleAccordion';
import PinotMethodUtils from '../utils/PinotMethodUtils';
-import EditConfigOp from '../components/Homepage/Operations/EditConfigOp';
import { NotificationContext } from
'../components/Notification/NotificationContext';
import Utils from '../utils/Utils';
import CustomButton from '../components/CustomButton';
import Confirm from '../components/Confirm';
+import CustomCodemirror from '../components/CustomCodemirror';
+import CustomDialog from '../components/CustomDialog';
+import { HelpOutlineOutlined } from '@material-ui/icons';
const useStyles = makeStyles(() => ({
root: {
@@ -122,6 +124,7 @@ const SchemaPageDetails = ({ match }:
RouteComponentProps<Props>) => {
const [schemaJSON, setSchemaJSON] = useState(null);
const [actionType,setActionType] = useState(null);
const [schemaJSONFormat, setSchemaJSONFormat] = useState(false);
+ const [reloadSegmentsOnUpdate, setReloadSegmentsOnUpdate] = useState(false);
const fetchTableSchema = async () => {
const result = await PinotMethodUtils.getTableSchemaData(schemaName);
@@ -162,7 +165,7 @@ const SchemaPageDetails = ({ match }:
RouteComponentProps<Props>) => {
const result = await PinotMethodUtils.updateTable(schemaName, configObj);
syncResponse(result);
} else if(actionType === 'editSchema'){
- const result = await
PinotMethodUtils.updateSchema(schemaJSON.schemaName, configObj);
+ const result = await
PinotMethodUtils.updateSchema(schemaJSON.schemaName, configObj,
reloadSegmentsOnUpdate);
syncResponse(result);
}
};
@@ -172,6 +175,7 @@ const SchemaPageDetails = ({ match }:
RouteComponentProps<Props>) => {
dispatch({type: 'success', message: result.status, show: true});
setShowEditConfig(false);
fetchTableJSON();
+ setReloadSegmentsOnUpdate(false);
} else {
dispatch({type: 'error', message: result.error, show: true});
}
@@ -197,6 +201,11 @@ const SchemaPageDetails = ({ match }:
RouteComponentProps<Props>) => {
setDialogDetails(null);
};
+ const handleSegmentDialogHide = () => {
+ setShowEditConfig(false);
+ setReloadSegmentsOnUpdate(false);
+ }
+
return fetching ? (
<AppLoader />
) : (
@@ -282,13 +291,45 @@ const SchemaPageDetails = ({ match }:
RouteComponentProps<Props>) => {
}
</Grid>
</Grid>
- <EditConfigOp
- showModal={showEditConfig}
- hideModal={()=>{setShowEditConfig(false);}}
- saveConfig={saveConfigAction}
- config={config}
- handleConfigChange={handleConfigChange}
- />
+ {/* Segment config edit dialog */}
+ <CustomDialog
+ open={showEditConfig}
+ handleClose={handleSegmentDialogHide}
+ title="Edit Schema"
+ handleSave={saveConfigAction}
+ >
+ <DialogContent>
+ <FormControlLabel
+ control={
+ <Checkbox
+ size="small"
+ color="primary"
+ checked={reloadSegmentsOnUpdate}
+ onChange={(e) => setReloadSegmentsOnUpdate(e.target.checked)}
+ name="reload"
+ />
+ }
+ label="Reload all segments"
+ />
+ <IconButton size="small">
+ <Tooltip
+ title="Reload all segments to make updated schema effective for
already ingested data."
+ arrow
+ placement="top"
+ >
+ <HelpOutlineOutlined fontSize="small" />
+ </Tooltip>
+ </IconButton>
+ <CustomCodemirror
+ data={config}
+ isEditable={true}
+ returnCodemirrorValue={(newValue) => {
+ handleConfigChange(newValue);
+ }}
+ />
+ </DialogContent>
+ </CustomDialog>
+
{confirmDialog && dialogDetails && <Confirm
openDialog={confirmDialog}
dialogTitle={dialogDetails.title}
diff --git a/pinot-controller/src/main/resources/app/requests/index.ts
b/pinot-controller/src/main/resources/app/requests/index.ts
index 9e14df149a..d53b02d5f6 100644
--- a/pinot-controller/src/main/resources/app/requests/index.ts
+++ b/pinot-controller/src/main/resources/app/requests/index.ts
@@ -51,8 +51,15 @@ export const getSchemaList = ():
Promise<AxiosResponse<OperationResponse>> =>
export const getSchema = (name: string):
Promise<AxiosResponse<OperationResponse>> =>
baseApi.get(`/schemas/${name}`);
-export const putSchema = (name: string, params: string):
Promise<AxiosResponse<OperationResponse>> =>
- baseApi.put(`/schemas/${name}`, params, { headers });
+export const putSchema = (name: string, params: string, reload?: boolean):
Promise<AxiosResponse<OperationResponse>> => {
+ let queryParams = {};
+
+ if(reload) {
+ queryParams["reload"] = reload;
+ }
+
+ return baseApi.put(`/schemas/${name}`, params, { headers, params:
queryParams });
+}
export const getSegmentMetadata = (tableName: string, segmentName: string):
Promise<AxiosResponse<IdealState>> =>
baseApi.get(`/segments/${tableName}/${segmentName}/metadata?columns=*`);
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index 0adb7968cb..83db4b0313 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -894,8 +894,8 @@ const updateTable = (tableName: string, table: string) => {
})
};
-const updateSchema = (schemaName: string, schema: string) => {
- return putSchema(schemaName, schema).then((res)=>{
+const updateSchema = (schemaName: string, schema: string, reload?: boolean) =>
{
+ return putSchema(schemaName, schema, reload).then((res)=>{
return res.data;
})
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
