Disable duplicate visualization and enable edit panel (#554)

Signed-off-by: Eugene Lee <eugenesk@amazon.com>
opensearch-project · Mar 9, 2022 · ac777ec · ac777ec
1 parent 3294129
commit ac777ec
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 44 deletions.
diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js
@@ -27,7 +27,7 @@ import {
   visName,
   composition,
   newName,
-} from '../utils/panel_constants';
+} from '../utils/app_constants';
 import { supressResizeObserverIssue } from '../utils/constants';
 
 describe('Creating application', () => {
@@ -214,6 +214,7 @@ describe('Viewing application', () => {
 
   it('Opens trace detail flyout when Trace ID is clicked', () => {
     cy.get('.euiTab').contains('Traces & Spans').click();
+    supressResizeObserverIssue();
     cy.wait(delay);
     cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
     cy.get('.euiFlyout').contains('Trace detail').should('be.visible');

diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { supressResizeObserverIssue } from './constants';
+
 export const delay = 700;
 
 export const moveToHomePage = () => {

diff --git a/dashboards-observability/common/types/custom_panels.ts b/dashboards-observability/common/types/custom_panels.ts
@@ -33,6 +33,7 @@ export interface SavedVisualizationType {
   name: string;
   query: string;
   type: string;
+  selected_date_range: { start: string; end: string; text: string };
   timeField: string;
   application_id?: string;
   user_configs: any;

diff --git a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx
@@ -10,6 +10,7 @@ import { FilterType } from 'public/components/trace_analytics/components/common/
 import React, { Dispatch, ReactChild } from 'react';
 import { batch } from 'react-redux';
 import PPLService from 'public/services/requests/ppl';
+import { preprocessQuery } from '../../../../common/utils/query_utils';
 import { SPAN_REGEX } from '../../../../common/constants/shared';
 import { fetchVisualizationById } from '../../../components/custom_panels/helpers/utils';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
@@ -210,10 +211,17 @@ export const calculateAvailability = async (
     // If there are thresholds, we get the current value
     if (visData.user_configs.dataConfig?.hasOwnProperty('thresholds')) {
       const thresholds = visData.user_configs.dataConfig.thresholds.reverse();
-      let currValue = '';
+      let currValue = Number.MIN_VALUE;
+      const finalQuery = preprocessQuery({
+        rawQuery: visData.query,
+        startTime: visData.selected_date_range.start,
+        endTime: visData.selected_date_range.end,
+        timeField: visData.timeField,
+        isLiveQuery: false,
+      });
       await pplService
         .fetch({
-          query: visData.query,
+          query: finalQuery,
           format: 'viz',
         })
         .then((res) => {
@@ -237,7 +245,7 @@ export const calculateAvailability = async (
               const expression = threshold.expression;
               switch (expression) {
                 case '>':
-                  if (currValue > threshold.value) {
+                  if (currValue > parseFloat(threshold.value)) {
                     availability = {
                       name: threshold.name,
                       color: threshold.color,
@@ -247,7 +255,7 @@ export const calculateAvailability = async (
                   }
                   break;
                 case '<':
-                  if (currValue < threshold.value) {
+                  if (currValue < parseFloat(threshold.value)) {
                     availability = {
                       name: threshold.name,
                       color: threshold.color,
@@ -257,7 +265,7 @@ export const calculateAvailability = async (
                   }
                   break;
                 case '=':
-                  if (currValue === threshold.value) {
+                  if (currValue === parseFloat(threshold.value)) {
                     availability = {
                       name: threshold.name,
                       color: threshold.color,

diff --git a/dashboards-observability/public/components/common/search/search.scss b/dashboards-observability/public/components/common/search/search.scss
@@ -28,7 +28,7 @@
 #autocomplete-textarea {
   width: 100%;
   outline: none;
-  min-height: 45px;
+  min-height: 48px;
   max-width: unset;
   height: 45px;
   resize: vertical;

diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
@@ -462,6 +462,8 @@ export const CustomPanelView = ({
         setPanelVisualizations={setPanelVisualizations}
         isFlyoutReplacement={isFlyoutReplacement}
         replaceVisualizationId={replaceVisualizationId}
+        appPanel={appPanel}
+        appId={appId}
       />
     );
   }
@@ -678,15 +680,34 @@ export const CustomPanelView = ({
               </EuiFlexItem>
               {appPanel && (
                 <>
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      iconType="pencil"
-                      onClick={() => editPanel('edit')}
-                      isDisabled={editDisabled}
-                    >
-                      Edit
-                    </EuiButton>
-                  </EuiFlexItem>
+                  {editMode ? (
+                    <>
+                      <EuiFlexItem grow={false}>
+                        <EuiButton
+                          iconType="cross"
+                          color="danger"
+                          onClick={() => editPanel('cancel')}
+                        >
+                          Cancel
+                        </EuiButton>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButton iconType="save" onClick={() => editPanel('save')}>
+                          Save
+                        </EuiButton>
+                      </EuiFlexItem>
+                    </>
+                  ) : (
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        iconType="pencil"
+                        onClick={() => editPanel('edit')}
+                        disabled={editDisabled}
+                      >
+                        Edit
+                      </EuiButton>
+                    </EuiFlexItem>
+                  )}
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       iconType="plusInCircle"

diff --git a/...l_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/...l_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
 <VisaulizationFlyout
+  appPanel={false}
   closeFlyout={[MockFunction]}
   end="now"
   http={[MockFunction]}
@@ -1061,6 +1062,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
 
 exports[`Visualization Flyout Component renders replace visualization Flyout 1`] = `
 <VisaulizationFlyout
+  appPanel={false}
   closeFlyout={[MockFunction]}
   end="2011-08-12T01:23:45.678Z"
   http={[MockFunction]}

diff --git a/.../custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx b/.../custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx
@@ -37,6 +37,7 @@ describe('Visualization Flyout Component', () => {
         http={httpClientMock}
         pplService={pplService}
         isFlyoutReplacement={isFlyoutReplacement}
+        appPanel={false}
       />
     );
 
@@ -68,6 +69,7 @@ describe('Visualization Flyout Component', () => {
         pplService={pplService}
         isFlyoutReplacement={isFlyoutReplacement}
         replaceVisualizationId={replaceVisualizationId}
+        appPanel={false}
       />
     );
 

diff --git a/...blic/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/...blic/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -2,6 +2,8 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import {
   EuiButton,
@@ -56,7 +58,7 @@ import { uiSettingsService } from '../../../../../common/utils';
  * replaceVisualizationId: string id of the visualization to be replaced
  */
 
-type Props = {
+interface VisualizationFlyoutProps {
   panelId: string;
   pplFilterValue: string;
   closeFlyout: () => void;
@@ -73,10 +75,14 @@ type Props = {
   setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
   isFlyoutReplacement?: boolean | undefined;
   replaceVisualizationId?: string | undefined;
-};
+  appPanel: boolean;
+  appId?: string;
+}
 
 export const VisaulizationFlyout = ({
   panelId,
+  appId,
+  appPanel,
   pplFilterValue,
   closeFlyout,
   start,
@@ -87,11 +93,11 @@ export const VisaulizationFlyout = ({
   setPanelVisualizations,
   isFlyoutReplacement,
   replaceVisualizationId,
-}: Props) => {
+}: VisualizationFlyoutProps) => {
   const [newVisualizationTitle, setNewVisualizationTitle] = useState('');
   const [newVisualizationType, setNewVisualizationType] = useState('');
   const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
-  const [previewMetaData, setPreviewMetaData] = useState();
+  const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
   const [pplQuery, setPPLQuery] = useState('');
   const [previewData, setPreviewData] = useState<pplResponse>({} as pplResponse);
   const [previewArea, setPreviewArea] = useState(<></>);
@@ -125,7 +131,7 @@ export const VisaulizationFlyout = ({
       http
         .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/replace`, {
           body: JSON.stringify({
-            panelId: panelId,
+            panelId,
             savedVisualizationId: selectValue,
             oldVisualizationId: replaceVisualizationId,
           }),
@@ -142,7 +148,7 @@ export const VisaulizationFlyout = ({
       http
         .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
           body: JSON.stringify({
-            panelId: panelId,
+            panelId,
             savedVisualizationId: selectValue,
           }),
         })
@@ -259,7 +265,7 @@ export const VisaulizationFlyout = ({
     ) : (
       <EuiFlyoutBody banner={emptySavedVisualizations}>
         <>
-          <div>Please use the "create new visualization" option in add visualization menu.</div>
+          <div>{'Please use the "create new visualization" option in add visualization menu.'}</div>
         </>
       </EuiFlyoutBody>
     );
@@ -286,8 +292,15 @@ export const VisaulizationFlyout = ({
       .then((res) => {
         if (res.visualizations.length > 0) {
           setSavedVisualizations(res.visualizations);
+          const filterAppVis = res.visualizations.filter((vis: SavedVisualizationType) => {
+            return appPanel
+              ? vis.hasOwnProperty('application_id')
+                ? vis.application_id === appId
+                : false
+              : !vis.hasOwnProperty('application_id');
+          });
           setVisualizationOptions(
-            res.visualizations.map((visualization: SavedVisualizationType) => {
+            filterAppVis.map((visualization: SavedVisualizationType) => {
               return { value: visualization.id, text: visualization.name };
             })
           );
@@ -306,7 +319,7 @@ export const VisaulizationFlyout = ({
           <EuiFlexItem>
             {previewLoading ? (
               <EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
-            ) : isPreviewError != '' ? (
+            ) : isPreviewError !== '' ? (
               <div className="visualization-error-div-preview">
                 <EuiIcon type="alert" color="danger" size="s" />
                 <EuiSpacer size="s" />
@@ -328,7 +341,7 @@ export const VisaulizationFlyout = ({
 
   // On change of selected visualization change options
   useEffect(() => {
-    for (var i = 0; i < savedVisualizations.length; i++) {
+    for (let i = 0; i < savedVisualizations.length; i++) {
       const visualization = savedVisualizations[i];
       if (visualization.id === selectValue) {
         setPPLQuery(visualization.query);

diff --git a/.../explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx b/.../explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx
@@ -67,7 +67,7 @@ export const ConfigThresholds = ({
             if (thrId !== th.thid) return th;
             return {
               ...th,
-              [thrName]: event?.target?.value || '',
+              [thrName]: (thrName === 'color' ? event : event?.target?.value) || '',
             };
           }),
         ]);
@@ -139,7 +139,7 @@ export const ConfigThresholds = ({
                       <EuiFieldNumber
                         fullWidth
                         placeholder="threshold value"
-                        value={thr.value || 0}
+                        value={thr.value}
                         onChange={handleThresholdChange(thr.thid, 'value')}
                         aria-label="Input threshold value"
                         data-test-subj="valueFieldNumber"

diff --git a/...-observability/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/...-observability/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -140,7 +140,10 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
     await http
       .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations`)
       .then((res) => {
-        opt2 = res.visualizations.map((vizObject) => ({
+        const noAppVisualizations = res.visualizations.filter((vis) => {
+          return !!!vis.application_id;
+        });
+        opt2 = noAppVisualizations.map((vizObject) => ({
           label: vizObject.name,
           key: vizObject.id,
           className: 'OBSERVABILITY_VISUALIZATION',

diff --git a/...-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/...-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -112,7 +112,11 @@ export function DashboardTable(props: {
                 })
               }
             >
-              {item.length < 48 ? item : <div title={item}>{_.truncate(item, { length: 48 })}</div>}
+              {item.length < 48 ? (
+                decodeURI(item)
+              ) : (
+                <div title={item}>{_.truncate(decodeURI(item), { length: 48 })}</div>
+              )}
             </EuiLink>
           ) : (
             '-'