Panels bug fix#1 (#159)

* fixed UI bugs #1 * folder name typo fix
opensearch-project · Oct 28, 2021 · 45932e6 · 45932e6
1 parent 769d028
commit 45932e6
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 75 deletions.
diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
@@ -26,8 +26,8 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiSuperDatePicker,
-  EuiSuperDatePickerProps,
   EuiTitle,
+  OnTimeChangeProps,
   ShortDate,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -103,6 +103,7 @@ export const CustomPanelView = ({
   const [inputDisabled, setInputDisabled] = useState(true);
   const [addVizDisabled, setAddVizDisabled] = useState(false);
   const [editDisabled, setEditDisabled] = useState(false);
+  const [dateDisabled, setDateDisabled] = useState(false);
   const [panelVisualizations, setPanelVisualizations] = useState<Array<VisualizationType>>([]);
   const [editMode, setEditMode] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
@@ -187,6 +188,22 @@ export const CustomPanelView = ({
     setIsModalVisible(true);
   };
 
+  const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') onRefreshFilters();
+  };
+
+  const onDatePickerChange = (props: OnTimeChangeProps) => {
+    onTimeChange(
+      props.start,
+      props.end,
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStart,
+      setEnd
+    );
+    onRefreshFilters();
+  };
+
   const onDelete = async () => {
     deleteCustomPanel(panelId, openPanelName).then((res) => {
       setTimeout(() => {
@@ -283,20 +300,23 @@ export const CustomPanelView = ({
       setEditDisabled(true);
       setInputDisabled(true);
       setAddVizDisabled(false);
-    }
-
-    // When in edit mode
-    if (editMode) {
-      setEditDisabled(false);
-      setInputDisabled(true);
-      setAddVizDisabled(true);
+      setDateDisabled(false);
     }
 
     // When panel has visualizations
     if (panelVisualizations.length > 0) {
       setEditDisabled(false);
       setInputDisabled(false);
       setAddVizDisabled(false);
+      setDateDisabled(false);
+    }
+
+    // When in edit mode
+    if (editMode) {
+      setEditDisabled(false);
+      setInputDisabled(true);
+      setAddVizDisabled(true);
+      setDateDisabled(true);
     }
   };
 
@@ -367,6 +387,7 @@ export const CustomPanelView = ({
       <VisaulizationFlyout
         panelId={panelId}
         closeFlyout={closeFlyout}
+        pplFilterValue={pplFilterValue}
         start={start}
         end={end}
         setToast={setToast}
@@ -509,7 +530,8 @@ export const CustomPanelView = ({
                   placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
                   value={pplFilterValue}
                   fullWidth={true}
-                  onChange={(e) => onChange(e)}
+                  onChange={onChange}
+                  onKeyPress={onKeyPress}
                   disabled={inputDisabled}
                 />
               </EuiFlexItem>
@@ -518,18 +540,10 @@ export const CustomPanelView = ({
                   dateFormat={UI_DATE_FORMAT}
                   start={start}
                   end={end}
-                  onTimeChange={(props: Readonly<EuiSuperDatePickerProps>) =>
-                    onTimeChange(
-                      props.start,
-                      props.end,
-                      recentlyUsedRanges,
-                      setRecentlyUsedRanges,
-                      setStart,
-                      setEnd
-                    )
-                  }
+                  onTimeChange={onDatePickerChange}
                   showUpdateButton={false}
                   recentlyUsedRanges={recentlyUsedRanges}
+                  isDisabled={dateDisabled}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>

diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -287,48 +287,32 @@ export const isPPLFilterValid = (
 };
 
 // This function renders the visualzation based of its type
-export const displayVisualization = (data: any, type: string) => {
+export const displayVisualization = (data: any, type: string, editMode?: boolean) => {
   if (data === undefined) return;
 
+  const layoutObject = {
+    xaxis: {
+      automargin: true,
+      fixedrange: editMode ? true : false,
+    },
+    yaxis: {
+      automargin: true,
+      fixedrange: editMode ? true : false,
+    },
+  };
+
   let vizComponent!: JSX.Element;
   switch (type) {
     case 'bar': {
-      vizComponent = (
-        <Bar
-          visualizations={data}
-          layoutConfig={{
-            yaxis: {
-              automargin: true,
-            },
-          }}
-        />
-      );
+      vizComponent = <Bar visualizations={data} layoutConfig={layoutObject} />;
       break;
     }
     case 'horizontal_bar': {
-      vizComponent = (
-        <HorizontalBar
-          visualizations={data}
-          layoutConfig={{
-            yaxis: {
-              automargin: true,
-            },
-          }}
-        />
-      );
+      vizComponent = <HorizontalBar visualizations={data} layoutConfig={layoutObject} />;
       break;
     }
     case 'line': {
-      vizComponent = (
-        <Line
-          visualizations={data}
-          layoutConfig={{
-            yaxis: {
-              automargin: true,
-            },
-          }}
-        />
-      );
+      vizComponent = <Line visualizations={data} layoutConfig={layoutObject} />;
       break;
     }
     default: {

diff --git a/...rds-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/...rds-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
@@ -15,7 +15,7 @@ import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
 import useObservable from 'react-use/lib/useObservable';
 import { CoreStart } from '../../../../../../../src/core/public';
 import PPLService from '../../../../services/requests/ppl';
-import { VisualizationContainer } from '../visualiation_container';
+import { VisualizationContainer } from '../visualization_container';
 import { VisualizationType } from '../../../../../common/types/custom_panels';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
 import './panel_grid.scss';

diff --git a/...l_modules/visualiation_container/index.ts → ..._modules/visualization_container/index.ts b/...l_modules/visualiation_container/index.ts → ..._modules/visualization_container/index.ts
diff --git a/...on_container/visualization_container.scss → ...on_container/visualization_container.scss b/...on_container/visualization_container.scss → ...on_container/visualization_container.scss
diff --git a/...ion_container/visualization_container.tsx → ...ion_container/visualization_container.tsx b/...ion_container/visualization_container.tsx → ...ion_container/visualization_container.tsx
@@ -147,7 +147,7 @@ export const VisualizationContainer = ({
             </EuiText>
           </div>
         ) : (
-          displayVisualization(visualizationData, visualizationType)
+          displayVisualization(visualizationData, visualizationType, editMode)
         )}
       </div>
     ),

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
@@ -65,6 +65,7 @@ import './visualization_flyout.scss';
 
 type Props = {
   panelId: string;
+  pplFilterValue: string;
   closeFlyout: () => void;
   start: ShortDate;
   end: ShortDate;
@@ -83,6 +84,7 @@ type Props = {
 
 export const VisaulizationFlyout = ({
   panelId,
+  pplFilterValue,
   closeFlyout,
   start,
   end,
@@ -186,7 +188,7 @@ export const VisaulizationFlyout = ({
       setPreviewData,
       setPreviewLoading,
       setIsPreviewError,
-      '',
+      pplFilterValue,
       newVisualizationTimeField
     );
   };
@@ -328,28 +330,30 @@ export const VisaulizationFlyout = ({
     const previewTemplate = (
       <>
         {timeRange}
-        {previewLoading ? (
-          <EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
-        ) : isPreviewError != '' ? (
-          <div className="visualization-error-div">
-            <EuiSpacer size="l" />
-            <EuiIcon type="alert" color="danger" size="l" />
-            <EuiSpacer size="l" />
-            <EuiText>
-              <h2>Error in rendering the visualizaiton</h2>
-            </EuiText>
-            <EuiSpacer size="l" />
-            <EuiText>
-              <p>{isPreviewError}</p>
-            </EuiText>
-          </div>
-        ) : (
-          <EuiFlexGroup>
-            <EuiFlexItem className="visualization-div">
-              {displayVisualization(previewData, newVisualizationType)}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        )}
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            {previewLoading ? (
+              <EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
+            ) : isPreviewError != '' ? (
+              <div className="visualization-error-div">
+                <EuiSpacer size="l" />
+                <EuiIcon type="alert" color="danger" size="l" />
+                <EuiSpacer size="l" />
+                <EuiText>
+                  <h2>Error in rendering the visualizaiton</h2>
+                </EuiText>
+                <EuiSpacer size="l" />
+                <EuiText>
+                  <p>{isPreviewError}</p>
+                </EuiText>
+              </div>
+            ) : (
+              <div className="visualization-div">
+                {displayVisualization(previewData, newVisualizationType)}
+              </div>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </>
     );
     setPreviewArea(previewTemplate);
-Original file line number
+Diff line change
@@ Expand Up / @@ -147,7 +147,7 @@ export const VisualizationContainer = ({ @@
                 </EuiText>
               </div>
             ) : (
-              displayVisualization(visualizationData, visualizationType)
+              displayVisualization(visualizationData, visualizationType, editMode)
             )}
           </div>
         ),
@@ Expand Down @@