Panels' visualization design change

dashboards-observability/common/constants/custom_panels.ts

@@ -12,26 +12,3 @@
 export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
 export const CUSTOM_PANELS_DOCUMENTATION_URL = 'https://www.opensearch.org';
 export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this custom panel.';
-export const RENAME_VISUALIZATION_MESSAGE =
-  'Enter a name to describe the purpose of this visualization.';
-
-export type VisualizationType = {
-  id: string;
-  title: string;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  query: string;
-  type: string;
-};
-
-export type PanelType = {
-  name: string;
-  dateCreated: string;
-  dateModified: string;
-  visualizations: VisualizationType[];
-  timeRange: { to: string; from: string };
-  queryFilter: { query: string; language: string };
-  refreshConfig: { pause: string; value: string };
-};

dashboards-observability/common/types/custom_panels.ts

@@ -18,14 +18,11 @@ export type CustomPanelListType = {
 
 export type VisualizationType = {
   id: string;
-  title: string;
+  savedVisualizationId: string;
   x: number;
   y: number;
   w: number;
   h: number;
-  query: string;
-  type: string;
-  timeField: string;
 };
 
 export type PanelType = {

dashboards-observability/public/components/custom_panels/custom_panel_table.tsx

@@ -36,7 +36,6 @@ import {
 } from '@elastic/eui';
 import React, { CSSProperties, ReactElement, useEffect, useState } from 'react';
 import { ChromeBreadcrumb } from '../../../../../src/core/public';
-import { CustomPanelListType } from './home';
 import {
   CREATE_PANEL_MESSAGE,
   CUSTOM_PANELS_DOCUMENTATION_URL,
@@ -45,6 +44,7 @@ import { UI_DATE_FORMAT } from '../../../common/constants/shared';
 import { getCustomModal, DeletePanelModal } from './helpers/modal_containers';
 import moment from 'moment';
 import _ from 'lodash';
+import { CustomPanelListType } from '../../../common/types/custom_panels';
 
 const pageStyles: CSSProperties = {
   float: 'left',
@@ -65,7 +65,6 @@ const pageStyles: CSSProperties = {
  * renameCustomPanel: rename function for the panel
  * cloneCustomPanel: clone function for the panel
  * deleteCustomPanelList: delete function for the panels
- * setToast: create Toast function
  */
 
 type Props = {

dashboards-observability/public/components/custom_panels/custom_panel_view.tsx

@@ -27,15 +27,13 @@ import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
   EuiTitle,
-  htmlIdGenerator,
   ShortDate,
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { EmptyPanelView } from './panel_modules/empty_panel';
 import {
-  RENAME_VISUALIZATION_MESSAGE,
   CREATE_PANEL_MESSAGE,
   CUSTOM_PANELS_API_PREFIX,
 } from '../../../common/constants/custom_panels';
@@ -292,79 +290,22 @@ export const CustomPanelView = ({
       });
   };
 
-  const cloneVisualization = (
-    newVisualizationTitle: string,
-    pplQuery: string,
-    newVisualizationType: string,
-    newVisualizationTimeField: string
-  ) => {
-    setModalLayout(
-      getCustomModal(
-        onCloneVisualization,
-        closeModal,
-        'Name',
-        'Duplicate Visualization',
-        'Cancel',
-        'Duplicate',
-        newVisualizationTitle + ' (copy)',
-        RENAME_VISUALIZATION_MESSAGE,
-        [pplQuery, newVisualizationType, newVisualizationTimeField]
-      )
-    );
-    showModal();
-  };
-
-  const onCloneVisualization = (
-    newVisualizationTitle: string,
-    pplQuery: string,
-    newVisualizationType: string,
-    newVisualizationTimeField: string
-  ) => {
+  const cloneVisualization = (visualzationTitle: string, savedVisualizationId: string) => {
     http
       .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
         body: JSON.stringify({
           panelId: panelId,
-          newVisualization: {
-            id: 'panelViz_' + htmlIdGenerator()(),
-            title: newVisualizationTitle,
-            query: pplQuery,
-            type: newVisualizationType,
-            timeField: newVisualizationTimeField,
-          },
+          savedVisualizationId: savedVisualizationId,
         }),
       })
       .then(async (res) => {
         setPanelVisualizations(res.visualizations);
-        setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
+        setToast(`Visualization ${visualzationTitle} successfully added!`, 'success');
       })
       .catch((err) => {
-        setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
+        setToast(`Error in adding ${visualzationTitle} visualization to the panel`, 'danger');
         console.error(err);
       });
-    closeModal();
-  };
-
-  const removeVisualization = (visualizationId: string) => {
-    const newVisualizationList = _.reject(panelVisualizations, {
-      id: visualizationId,
-    });
-    if (newVisualizationList.length === 0) {
-      setEditMode(false);
-      http
-        .put(`${CUSTOM_PANELS_API_PREFIX}/visualizations/edit`, {
-          body: JSON.stringify({
-            panelId: panelId,
-            visualizationParams: [],
-          }),
-        })
-        .then(async (res) => {
-          setPanelVisualizations(res.visualizations);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    }
-    setPanelVisualizations(newVisualizationList);
   };
 
   //Add Visualization Button
@@ -533,7 +474,7 @@ export const CustomPanelView = ({
                 cloneVisualization={cloneVisualization}
                 pplFilterValue={pplFilterValue}
                 showFlyout={showFlyout}
-                removeVisualization={removeVisualization}
+                setEditMode={setEditMode}
               />
             )}
             <></>

dashboards-observability/public/components/custom_panels/helpers/utils.tsx

@@ -20,16 +20,23 @@ import React from 'react';
 import { Bar } from '../../visualizations/charts/bar';
 import { HorizontalBar } from '../../visualizations/charts/horizontal_bar';
 import { Line } from '../../visualizations/charts/line';
+import { CoreStart } from '../../../../../../src/core/public';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { VisualizationType, SavedVisualizationType } from '../../../../common/types/custom_panels';
+import { Layout } from 'react-grid-layout';
 
 /*
  * "Utils" This file contains different reused functions in operational panels
+ *
  * isNameValid - Validates string to length > 0 and < 50
  * convertDateTime - Converts input datetime string to required format
+ * mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
  * getQueryResponse - Get response of PPL query to load visualizations
+ * renderSavedVisualization - Fetches savedVisualization by Id and runs getQueryResponse
  * onTimeChange - Function to store recently used time filters and set start and end time.
  * isDateValid - Function to check date validity
  * isPPLFilterValid - Validate if the panel PPL query doesn't contain any Index/Time/Field filters
- * displayVisualization - This function renders the visualzation based of its type
+ * displayVisualization - Function to render the visualzation based of its type
  */
 
 // Name validation 0>Name<=50
@@ -50,6 +57,30 @@ export const convertDateTime = (datetime: string, isStart = true, formatted = tr
   return returnTime;
 };
 
+// Merges new layout into visualizations
+export const mergeLayoutAndVisualizations = (
+  layout: Layout[],
+  newVisualizationList: VisualizationType[],
+  setPanelVisualizations: (value: React.SetStateAction<VisualizationType[]>) => void
+) => {
+  let newPanelVisualizations: VisualizationType[] = [];
+
+  for (var i = 0; i < newVisualizationList.length; i++) {
+    for (var j = 0; j < layout.length; j++) {
+      if (newVisualizationList[i].id == layout[j].i) {
+        newPanelVisualizations.push({
+          ...newVisualizationList[i],
+          x: layout[j].x,
+          y: layout[j].y,
+          w: layout[j].w,
+          h: layout[j].h,
+        });
+      }
+    }
+  }
+  setPanelVisualizations(newPanelVisualizations);
+};
+
 /* Builds Final Query by adding time and query filters(From panel UI) to the original visualization query
  * -> Final Query is as follows:
  * -> finalQuery = indexPartOfQuery + timeQueryFilter + panelFilterQuery + filterPartOfQuery
@@ -102,6 +133,27 @@ const pplServiceRequestor = async (
     });
 };
 
+//Fetched Saved Visualization By Id
+const fetchVisualizationById = async (
+  http: CoreStart['http'],
+  savedVisualizationId: string,
+  setIsError: React.Dispatch<React.SetStateAction<string>>
+) => {
+  let savedVisualization = {} as SavedVisualizationType;
+  await http
+    .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations/${savedVisualizationId}`)
+    .then((res) => {
+      savedVisualization = res.visualization;
+    })
+    .catch((err) => {
+      const errorMessage = 'Issue in fetching the saved Visualization by Id';
+      setIsError(errorMessage);
+      console.error(errorMessage, err);
+    });
+
+  return savedVisualization;
+};
+
 // Get PPL Query Response
 export const getQueryResponse = (
   pplService: PPLService,
@@ -122,14 +174,58 @@ export const getQueryResponse = (
   try {
     finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
   } catch (error) {
-    console.error('Issue in building final query', error.stack);
+    const errorMessage = 'Issue in building final query';
+    setIsError(errorMessage);
+    console.error(errorMessage, error);
     setIsLoading(false);
     return;
   }
 
   pplServiceRequestor(pplService, finalQuery, type, setVisualizationData, setIsLoading, setIsError);
 };
 
+// Fetches savedVisualization by Id and runs getQueryResponse
+export const renderSavedVisualization = async (
+  http: CoreStart['http'],
+  pplService: PPLService,
+  savedVisualizationId: string,
+  startTime: string,
+  endTime: string,
+  filterQuery: string,
+  setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationType: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>
+) => {
+  setIsLoading(true);
+  setIsError('');
+
+  let visualization = {} as SavedVisualizationType;
+  visualization = await fetchVisualizationById(http, savedVisualizationId, setIsError);
+
+  if (visualization.name) {
+    setVisualizationTitle(visualization.name);
+  }
+
+  if (visualization.type) {
+    setVisualizationType(visualization.type);
+  }
+
+  getQueryResponse(
+    pplService,
+    visualization.query,
+    visualization.type,
+    startTime,
+    endTime,
+    setVisualizationData,
+    setIsLoading,
+    setIsError,
+    filterQuery,
+    visualization.timeField
+  );
+};
+
 // Function to store recently used time filters and set start and end time.
 export const onTimeChange = (
   start: ShortDate,

dashboards-observability/public/components/custom_panels/home.tsx

@@ -59,10 +59,12 @@ export const Home = ({ http, chrome, parentBreadcrumb, pplService, renderProps }
 
   // Fetches all saved Custom Panels
   const fetchCustomPanels = () => {
+    setLoading(true);
     return http
       .get(`${CUSTOM_PANELS_API_PREFIX}/panels`)
       .then((res) => {
         setcustomPanelData(res.panels);
+        setLoading(false);
       })
       .catch((err) => {
         console.error('Issue in fetching the operational panels', err.body.message);