This is an automated email from the ASF dual-hosted git repository.
ankitsultana 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 b32dfedf93d [logical] Adding logical tables panel in Query Console
Controller UI (#17199)
b32dfedf93d is described below
commit b32dfedf93ddedf95dbf1c4e81dbdab8d1ced185
Author: Shaurya Chaturvedi <[email protected]>
AuthorDate: Thu Nov 13 07:09:11 2025 -0800
[logical] Adding logical tables panel in Query Console Controller UI
(#17199)
Co-authored-by: shauryachats <[email protected]>
---
.../resources/app/components/Query/QuerySideBar.tsx | 14 +++++++++++++-
.../src/main/resources/app/pages/Query.tsx | 7 +++++++
.../src/main/resources/app/requests/index.ts | 3 +++
.../src/main/resources/app/utils/PinotMethodUtils.ts | 20 +++++++++++++++++++-
4 files changed, 42 insertions(+), 2 deletions(-)
diff --git
a/pinot-controller/src/main/resources/app/components/Query/QuerySideBar.tsx
b/pinot-controller/src/main/resources/app/components/Query/QuerySideBar.tsx
index 76d5c2dd962..5baf6650082 100644
--- a/pinot-controller/src/main/resources/app/components/Query/QuerySideBar.tsx
+++ b/pinot-controller/src/main/resources/app/components/Query/QuerySideBar.tsx
@@ -77,6 +77,7 @@ const useStyles = makeStyles((theme: Theme) =>
type Props = {
tableList: TableData;
+ logicalTableList?: TableData;
fetchSQLData: Function;
tableSchema: TableData;
selectedTable: string;
@@ -84,7 +85,7 @@ type Props = {
queryType?: 'sql' | 'timeseries';
};
-const Sidebar = ({ tableList, fetchSQLData, tableSchema, selectedTable,
queryLoader }: Props) => {
+const Sidebar = ({ tableList, logicalTableList, fetchSQLData, tableSchema,
selectedTable, queryLoader }: Props) => {
const classes = useStyles();
const history = useHistory();
const location = useLocation();
@@ -144,6 +145,17 @@ const Sidebar = ({ tableList, fetchSQLData, tableSchema,
selectedTable, queryLoa
inAccordionFormat
/>
+ {logicalTableList && logicalTableList.records.length > 0 &&
isSqlQuery ? (
+ <CustomizedTables
+ title="Logical Tables"
+ data={logicalTableList}
+ cellClickCallback={fetchSQLData}
+ isCellClickable={isSqlQuery}
+ showSearchBox={true}
+ inAccordionFormat
+ />
+ ) : null}
+
{!queryLoader && tableSchema.records.length && isSqlQuery ? (
<CustomizedTables
title={`${selectedTable} schema`}
diff --git a/pinot-controller/src/main/resources/app/pages/Query.tsx
b/pinot-controller/src/main/resources/app/pages/Query.tsx
index 1f5caeef672..e86e14fa76b 100644
--- a/pinot-controller/src/main/resources/app/pages/Query.tsx
+++ b/pinot-controller/src/main/resources/app/pages/Query.tsx
@@ -228,6 +228,10 @@ const QueryPage = () => {
columns: [],
records: [],
});
+ const [logicalTableList, setLogicalTableList] = useState<TableData>({
+ columns: [],
+ records: [],
+ });
const [showErrorType, setShowErrorType] =
useState<ErrorViewType>(ErrorViewType.EXCEPTION);
const [tableSchema, setTableSchema] = useState<TableData>({
@@ -451,6 +455,8 @@ const QueryPage = () => {
const fetchData = async () => {
const result = await PinotMethodUtils.getQueryTablesList({bothType:
false});
setTableList(result);
+ const logicalTablesResult = await
PinotMethodUtils.getQueryLogicalTablesList();
+ setLogicalTableList(logicalTablesResult);
setFetching(false);
};
@@ -526,6 +532,7 @@ const QueryPage = () => {
<Grid item>
<QuerySideBar
tableList={tableList}
+ logicalTableList={logicalTableList}
fetchSQLData={fetchSQLData}
tableSchema={tableSchema}
selectedTable={selectedTable}
diff --git a/pinot-controller/src/main/resources/app/requests/index.ts
b/pinot-controller/src/main/resources/app/requests/index.ts
index eedcca327a6..8c9a354cd8c 100644
--- a/pinot-controller/src/main/resources/app/requests/index.ts
+++ b/pinot-controller/src/main/resources/app/requests/index.ts
@@ -230,6 +230,9 @@ export const getClusterConfig = ():
Promise<AxiosResponse<ClusterConfig>> =>
export const getQueryTables = (type?: string):
Promise<AxiosResponse<QueryTables>> =>
baseApi.get(`/tables${type ? `?type=${type}`: ''}`);
+export const getLogicalTables = (): Promise<AxiosResponse<string[]>> =>
+ baseApi.get(`/logicalTables`);
+
export const getTableSchema = (name: string):
Promise<AxiosResponse<TableSchema>> =>
baseApi.get(`/tables/${name}/schema`);
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index c74568a5c00..a437ab8b82d 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -114,7 +114,8 @@ import {
pauseConsumption,
resumeConsumption,
getPauseStatus,
- getVersions
+ getVersions,
+ getLogicalTables
} from '../requests';
import { baseApi } from './axios-config';
import Utils from './Utils';
@@ -277,6 +278,22 @@ const getQueryTablesList = ({bothType = false}) => {
});
};
+// This method is used to display logical table listing on query page
+// API: /logicalTables
+// Expected Output: {columns: [], records: []}
+const getQueryLogicalTablesList = () => {
+ return getLogicalTables().then(({ data }) => {
+ const responseObj = {
+ columns: ['Logical Tables'],
+ records: []
+ };
+ data.map((logicalTable) => {
+ responseObj.records.push([logicalTable]);
+ });
+ return responseObj;
+ });
+};
+
// This method is used to display particular table schema on query page
// API: /tables/:tableName/schema
const getTableSchemaData = (tableName) => {
@@ -1377,6 +1394,7 @@ export default {
getClusterConfigData,
getClusterConfigJSON,
getQueryTablesList,
+ getQueryLogicalTablesList,
getTableSchemaData,
getQueryResults,
getTenantTableData,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
