Merge branch 'main' into enhancements/treemap

opensearch-project · Jun 23, 2022 · 6df7f8e · 6df7f8e
2 parents a995def + 0c5dda9
commit 6df7f8e
Show file tree

Hide file tree

Showing 12 changed files with 438 additions and 102 deletions.
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { visChartTypes } from "./shared";
+import { visChartTypes } from './shared';
 export const EVENT_ANALYTICS_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/observability-plugin/event-analytics/';
 export const OPEN_TELEMETRY_LOG_CORRELATION_LINK =
@@ -79,4 +79,40 @@ export const PLOTLY_GAUGE_COLUMN_NUMBER = 5;
 export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
 export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';
 
-export const VIZ_CONTAIN_XY_AXIS = [visChartTypes.Bar, visChartTypes.Histogram, visChartTypes.Line, visChartTypes.Pie];
+export const VIZ_CONTAIN_XY_AXIS = [
+  visChartTypes.Bar,
+  visChartTypes.Histogram,
+  visChartTypes.Line,
+  visChartTypes.Pie,
+];
+
+// default ppl aggregation method options
+export const AGGREGATION_OPTIONS = [
+  {
+    label: 'COUNT',
+  },
+  {
+    label: 'SUM',
+  },
+  {
+    label: 'AVERAGE',
+  },
+  {
+    label: 'MAX',
+  },
+  {
+    label: 'MIN',
+  },
+  {
+    label: 'VAR_SAMP',
+  },
+  {
+    label: 'VAR_POP',
+  },
+  {
+    label: 'STDDEV_SAMP',
+  },
+  {
+    label: 'STDDEV_POP',
+  },
+];
diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -685,28 +685,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
-                          Object {
-                            "editor": [Function],
-                            "id": "value_options",
-                            "mapTo": "valueOptions",
-                            "name": "Value options",
-                            "schemas": Array [
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "xaxis",
-                                "name": "Label",
-                                "onChangeHandler": "setXaxisSelections",
-                              },
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "yaxis",
-                                "name": "Value",
-                                "onChangeHandler": "setYaxisSelections",
-                              },
-                            ],
-                          },
                           Object {
                             "editor": [Function],
                             "id": "legend",
@@ -759,6 +737,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   ],
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "size",
+                                "name": "Legend Size",
+                              },
                             ],
                           },
                           Object {
@@ -769,16 +753,17 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "schemas": Array [
                               Object {
                                 "component": null,
+                                "defaultState": Array [
+                                  Object {
+                                    "label": "Pie",
+                                    "modeId": "pie",
+                                    "name": "Pie",
+                                  },
+                                ],
                                 "isSingleSelection": true,
                                 "mapTo": "mode",
                                 "name": "Mode",
                                 "props": Object {
-                                  "defaultSelections": Array [
-                                    Object {
-                                      "modeId": "pie",
-                                      "name": "Pie",
-                                    },
-                                  ],
                                   "dropdownList": Array [
                                     Object {
                                       "modeId": "pie",
@@ -791,6 +776,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   ],
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "labelSize",
+                                "name": "Label Size",
+                              },
                               Object {
                                 "component": [Function],
                                 "defaultState": Object {

diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx
@@ -11,7 +11,7 @@ interface ToggleButtonOptions {
   label: string;
 }
 interface ToggleGroupProps {
-  title: string;
+  title?: string;
   legend: string;
   groupOptions: ToggleButtonOptions[];
   idSelected: string;

diff --git a/...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -84,6 +84,14 @@ export const ConfigChartOptions = ({
             vizState,
             ...schema.props,
           };
+        } else if (schema.eleType === 'input') {
+          params = {
+            title: schema.name,
+            currentValue: vizState[schema.mapTo] || '',
+            handleInputChange: handleConfigurationChange(schema.mapTo),
+            vizState,
+            ...schema.props,
+          };
         } else {
           params = {
             paddingTitle: schema.name,

diff --git a/...ytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx b/...ytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
@@ -22,25 +22,39 @@ export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) =>
   );
 
   const dimensions = useMemo(() => {
-    return schemas.map((schema: IConfigPanelOptionSection, index: number) => {
+    return schemas.map((schema, index) => {
       const DimensionComponent = schema.component || ButtonGroupItem;
-      const params = {
-        title: schema.name,
-        legend: schema.name,
-        groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ ...btn, label: btn.name })),
-        idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-        handleButtonChange: handleConfigurationChange(schema.mapTo),
-        vizState,
-        ...schema.props,
-      };
+      let params = {};
+      if (schema.eleType === 'input') {
+        params = {
+          title: schema.name,
+          currentValue: vizState[schema.mapTo] || '',
+          handleInputChange: handleConfigurationChange(schema.mapTo),
+          vizState,
+          ...schema.props,
+        };
+      } else {
+        params = {
+          title: schema.name,
+          legend: schema.name,
+          groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+            ...btn,
+            label: btn.name,
+          })),
+          idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+          handleButtonChange: handleConfigurationChange(schema.mapTo),
+          vizState,
+          ...schema.props,
+        };
+      }
       return (
         <>
           <DimensionComponent key={`viz-series-${index}`} {...params} />
           <EuiSpacer size="s" />
         </>
       );
     });
-  }, [schemas, vizState, handleConfigurationChange]);;
+  }, [schemas, vizState, handleConfigurationChange]);
 
   return (
     <EuiAccordion initialIsOpen id="configPanel__legend" buttonContent="Legend" paddingSize="s">

diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+
+interface InputFieldProps {
+  title: string;
+  numValue: number;
+  handleInputChange: (value?: any) => void;
+}
+
+export const InputFieldItem: React.FC<InputFieldProps> = ({
+  title,
+  numValue,
+  handleInputChange,
+}) => (
+  <>
+    <EuiTitle size="xxs">
+      <h3>{title}</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFieldNumber
+      id={htmlIdGenerator('input-number')()}
+      fullWidth
+      placeholder="auto"
+      value={numValue}
+      onChange={(e) => handleInputChange(e.target.value)}
+      data-test-subj="valueFieldNumber"
+    />
+  </>
+);