[pinot] branch master updated: load schema ui async; use skeleton loading indicator (#9781)

[ja...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

jackie 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 24ec46f99a load schema ui async; use skeleton loading indicator (#9781)
24ec46f99a is described below

commit 24ec46f99ae10d13937b6a413ef6f2509f7b0d92
Author: Johan Adami <47...@users.noreply.github.com>
AuthorDate: Mon Nov 21 13:22:09 2022 -0500

    load schema ui async; use skeleton loading indicator (#9781)
---
 .../src/main/resources/app/interfaces/types.d.ts   |  2 ++
 .../main/resources/app/pages/TablesListingPage.tsx | 33 +++++++++++-----------
 .../src/main/resources/app/requests/index.ts       |  5 ++--
 .../main/resources/app/utils/PinotMethodUtils.ts   | 22 +++++++++++++--
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/pinot-controller/src/main/resources/app/interfaces/types.d.ts b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
index 172ed843f9..29d9927e13 100644
--- a/pinot-controller/src/main/resources/app/interfaces/types.d.ts
+++ b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
@@ -85,6 +85,8 @@ declare module 'Models' {
     tables: Array<string>;
   };
 
+  export type QuerySchemas = Array<string>;
+
   export type TableSchema = {
     dimensionFieldSpecs: Array<schema>;
     metricFieldSpecs?: Array<schema>;
diff --git a/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx b/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
index f6ed181d4f..dc2bd66f6e 100644
--- a/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
+++ b/pinot-controller/src/main/resources/app/pages/TablesListingPage.tsx
@@ -28,6 +28,7 @@ import SimpleAccordion from '../components/SimpleAccordion';
 import AddSchemaOp from '../components/Homepage/Operations/AddSchemaOp';
 import AddOfflineTableOp from '../components/Homepage/Operations/AddOfflineTableOp';
 import AddRealtimeTableOp from '../components/Homepage/Operations/AddRealtimeTableOp';
+import Skeleton from '@material-ui/lab/Skeleton';
 
 const useStyles = makeStyles(() => ({
   gridContainer: {
@@ -72,31 +73,33 @@ const TablesListingPage = () => {
     false
   );
 
-  const loading = 'Loading...';
+  const loading = { customRenderer: <Skeleton animation={'wave'} /> };
 
   const fetchData = async () => {
+    const schemaResponse = await PinotMethodUtils.getQuerySchemaList();
+    const schemaList = [];
+    const schemaData = [];
+    schemaResponse.records.map((record) => {
+      schemaList.push(...record);
+    });
+    schemaList.map((schema) => {
+      schemaData.push([schema].concat([...Array(PinotMethodUtils.allSchemaDetailsColumnHeader.length - 1)].map((e) => loading)));
+    });
     const tablesResponse = await PinotMethodUtils.getQueryTablesList({
       bothType: true,
     });
     const tablesList = [];
     const tableData = [];
-    const tableColumnHeaders = [
-      'Table Name',
-      'Reported Size',
-      'Estimated Size',
-      'Number of Segments',
-      'Status',
-    ];
     tablesResponse.records.map((record) => {
       tablesList.push(...record);
     });
     tablesList.map((table) => {
-      tableData.push([table, loading, loading, loading, loading]);
+      tableData.push([table].concat([...Array(PinotMethodUtils.allTableDetailsColumnHeader.length - 1)].map((e) => loading)));
     });
     // Set the table data to "Loading..." at first as tableSize can take minutes to fetch
     // for larger tables.
     setTableData({
-      columns: tableColumnHeaders,
+      columns: PinotMethodUtils.allTableDetailsColumnHeader,
       records: tableData,
       isLoading: false,
     });
@@ -104,14 +107,14 @@ const TablesListingPage = () => {
     // Set just the column headers so these do not have to load with the data
     setSchemaDetails({
       columns: PinotMethodUtils.allSchemaDetailsColumnHeader,
-      records: [],
-      isLoading: true,
+      records: schemaData,
+      isLoading: false,
     });
 
     // these implicitly set isLoading=false by leaving it undefined
     const tableDetails = await PinotMethodUtils.getAllTableDetails(tablesList);
     setTableData(tableDetails);
-    const schemaDetailsData = await PinotMethodUtils.getAllSchemaDetails();
+    const schemaDetailsData = await PinotMethodUtils.getAllSchemaDetails(schemaList);
     setSchemaDetails(schemaDetailsData);
   };
 
@@ -119,9 +122,7 @@ const TablesListingPage = () => {
     fetchData();
   }, []);
 
-  return tableData.isLoading && schemaDetails.isLoading ? (
-    <AppLoader />
-  ) : (
+  return (
     <Grid item xs className={classes.gridContainer}>
       <div className={classes.operationDiv}>
         <SimpleAccordion headerTitle="Operations" showSearchBox={false}>
diff --git a/pinot-controller/src/main/resources/app/requests/index.ts b/pinot-controller/src/main/resources/app/requests/index.ts
index d53b02d5f6..8881159487 100644
--- a/pinot-controller/src/main/resources/app/requests/index.ts
+++ b/pinot-controller/src/main/resources/app/requests/index.ts
@@ -20,7 +20,8 @@
 import { AxiosResponse } from 'axios';
 import { TableData, Instances, Instance, Tenants, ClusterConfig, TableName, TableSize,
   IdealState, QueryTables, TableSchema, SQLResult, ClusterName, ZKGetList, ZKConfig, OperationResponse,
-  BrokerList, ServerList, UserList, TableList, UserObject, TaskProgressResponse, TableSegmentJobs, TaskRuntimeConfig, SegmentDebugDetails
+  BrokerList, ServerList, UserList, TableList, UserObject, TaskProgressResponse, TableSegmentJobs, TaskRuntimeConfig,
+  SegmentDebugDetails, QuerySchemas
 } from 'Models';
 
 const headers = {
@@ -45,7 +46,7 @@ export const getTenantTableDetails = (tableName: string): Promise<AxiosResponse<
 export const putTable = (name: string, params: string): Promise<AxiosResponse<OperationResponse>> =>
   baseApi.put(`/tables/${name}`, params, { headers });
 
-export const getSchemaList = (): Promise<AxiosResponse<OperationResponse>> =>
+export const getSchemaList = (): Promise<AxiosResponse<QuerySchemas>> =>
   baseApi.get(`/schemas`);
 
 export const getSchema = (name: string): Promise<AxiosResponse<OperationResponse>> =>
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index 83db4b0313..0feffd7a5e 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -352,13 +352,28 @@ const getSchemaObject = async (schemaName) =>{
       return schemaObj;
   }
 
+// This method is used to display schema listing on the tables listing page
+// API: /schemas
+// Expected Output: {columns: [], records: []}
+const getListingSchemaList = () => {
+  return getSchemaList().then((results) => {
+    const responseObj = {
+      columns: ['Schemas'],
+      records: []
+    };
+    results.data.forEach((result)=>{
+      responseObj.records.push([result]);
+    });
+    return responseObj;
+  })
+};
+
 const allSchemaDetailsColumnHeader = ["Schema Name", "Dimension Columns", "Date-Time Columns", "Metrics Columns", "Total Columns"];
 
-const getAllSchemaDetails = async () => {
+const getAllSchemaDetails = async (schemaList) => {
   let schemaDetails:Array<any> = [];
   let promiseArr = [];
-  const {data} = await getSchemaList()
-  promiseArr = data.map(async (o)=>{
+  promiseArr = schemaList.map(async (o)=>{
     return await getSchema(o);
   });
   const results = await Promise.all(promiseArr);
@@ -1157,6 +1172,7 @@ export default {
   saveSchemaAction,
   saveTableAction,
   getSchemaData,
+  getQuerySchemaList: getListingSchemaList,
   allSchemaDetailsColumnHeader,
   getAllSchemaDetails,
   getTableState,


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org