Minor UI changes for sidebar and update to PPL request (#1246)

Signed-off-by: Sean Li <[email protected]> Signed-off-by: Sean Li <[email protected]>
opensearch-project · Nov 4, 2022 · abdd0d7 · abdd0d7
1 parent 7c0188f
commit abdd0d7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/dashboards-observability/common/constants/metrics.ts b/dashboards-observability/common/constants/metrics.ts
@@ -6,8 +6,8 @@
 // requests constants
 export const VISUALIZATION = 'viz';
 export const SAVED_VISUALIZATION = 'savedVisualization';
-export const PPL_PROMETHEUS_CATALOG_REQUEST =
-  'show catalogs | where CONNECTOR_TYPE="PROMETHEUS" | fields CATALOG_NAME';
+export const PPL_DATASOURCES_REQUEST =
+  'show datasources | where CONNECTOR_TYPE="PROMETHEUS" | fields DATASOURCE_NAME';
 
 // redux
 export const REDUX_SLICE_METRICS = 'metrics';

diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
@@ -126,7 +126,7 @@ export const Home = ({
   }, [metricsLayout]);
 
   const mainSectionClassName = classNames({
-    'col-md-9': !isSidebarClosed,
+    'col-md-10': !isSidebarClosed,
     'col-md-12': isSidebarClosed,
   });
 
@@ -173,7 +173,7 @@ export const Home = ({
                 />
                 <div className="dscAppContainer">
                   <div
-                    className={`col-md-3 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+                    className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
                   >
                     <div className="">
                       {!isSidebarClosed && <Sidebar http={http} pplService={pplService} />}

diff --git a/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts b/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts
@@ -5,7 +5,7 @@
 
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import {
-  PPL_PROMETHEUS_CATALOG_REQUEST,
+  PPL_DATASOURCES_REQUEST,
   REDUX_SLICE_METRICS,
 } from '../../../../../common/constants/metrics';
 import { pplServiceRequestor, getVisualizations, getNewVizDimensions } from '../../helpers/utils';
@@ -44,16 +44,16 @@ const fetchCustomMetrics = async (http: any) => {
 
 const fetchRemoteMetrics = async (pplService: any) => {
   const dataSet = [];
-  const catalogs = await pplServiceRequestor(pplService, PPL_PROMETHEUS_CATALOG_REQUEST);
-  for (const catalog of catalogs.jsonData) {
+  const dataSources = await pplServiceRequestor(pplService, PPL_DATASOURCES_REQUEST);
+  for (const dataSource of dataSources.jsonData) {
     const catalogData = await pplServiceRequestor(
       pplService,
-      `source = ${catalog.CATALOG_NAME}.information_schema.tables`
+      `source = ${dataSource.DATASOURCE_NAME}.information_schema.tables`
     );
     const normalizedData = catalogData.jsonData.map((obj: any) => ({
       id: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
       name: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
-      catalog: `${catalog.CATALOG_NAME}`,
+      catalog: `${dataSource.DATASOURCE_NAME}`,
       type: obj.TABLE_TYPE,
       recentlyCreated: false,
     }));

diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.scss b/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
@@ -146,12 +146,14 @@
 
 .metricsList {
   line-height:normal;
-  margin-top:10px;
+  margin-top:5px;
+}
+
+.metricsListContainer {
+  margin-left:25px;
+  margin-right:5px;
 }
 
 .metricName {
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
   margin-bottom:10px;
 }
diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx b/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
@@ -56,11 +56,11 @@ export const Sidebar = (props: ISidebarProps) => {
               <span>Recently Created Metrics</span>
             </EuiTitle>
           }
-          paddingSize="xs"
+          paddingSize="none"
         >
           <ul className="metricsList">
             {recentlyCreatedMetrics.map((metric: any) => (
-              <li className="metricName" key={metric.id}>
+              <li key={metric.id} className="metricsListContainer">
                 <EuiLink
                   className="metricName eui-textTruncate"
                   title={metric.name}
@@ -81,11 +81,11 @@ export const Sidebar = (props: ISidebarProps) => {
               <span>Selected Metrics</span>
             </EuiTitle>
           }
-          paddingSize="xs"
+          paddingSize="none"
         >
           <ul className="metricsList">
             {selectedMetrics.map((metric: any) => (
-              <li key={metric.id}>
+              <li key={metric.id} className="metricsListContainer">
                 <EuiLink
                   className="metricName eui-textTruncate"
                   title={metric.name}
@@ -106,11 +106,11 @@ export const Sidebar = (props: ISidebarProps) => {
               <span>Available Metrics</span>
             </EuiTitle>
           }
-          paddingSize="xs"
+          paddingSize="none"
         >
           <ul className="metricsList">
             {availableMetrics.slice(0, 100).map((metric: any) => (
-              <li key={metric.id}>
+              <li key={metric.id} className="metricsListContainer">
                 <EuiLink
                   className="metricName eui-textTruncate"
                   title={metric.name}