Move Date Histogram to dimensions

Signed-off-by: harshada.lingayat <[email protected]>
opensearch-project · Oct 17, 2022 · 0d9fb00 · 0d9fb00
1 parent 459289c
commit 0d9fb00
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 129 deletions.
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -269,3 +269,7 @@ export enum ConfigChartOptionsEnum {
 
 export const CUSTOM_LABEL = 'customLabel';
 export const BREAKDOWNS = 'breakdowns';
+export const SPAN = 'span';
+export const AGGREGATION_INFO = 'At least one metric is required to render a chart';
+export const DIMENSION_INFO = 'The timestamp type field can be selected as a first dimension only';
+export const TIME_FIELD = 'time_field';
diff --git a/dashboards-observability/common/query_manager/utils/index.ts b/dashboards-observability/common/query_manager/utils/index.ts
@@ -20,7 +20,8 @@ export const composeAggregations = (
     })),
     groupby: {
       group_fields: aggConfig.dimensions.map((dimension) => ({ name: dimension.name })),
-      span: aggConfig.span ? composeSpan(aggConfig.span) : null,
+      ...(aggConfig.span &&
+        JSON.stringify(aggConfig.span) !== '{}' && { span: composeSpan(aggConfig.span) }),
     },
     partitions: staleStats?.partitions ?? {},
     all_num: staleStats?.all_num ?? {},

diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -46,6 +46,12 @@ export interface IField {
   label?: string;
 }
 
+export interface TimeUnit {
+  name: string;
+  label: string;
+  value: string;
+}
+
 export interface ExplorerFields {
   availableFields: IField[];
   queriedFields: IField[];
@@ -294,9 +300,9 @@ export interface HistogramConfigList {
 }
 
 export interface DimensionSpan {
-  time_field: IField;
+  time_field: IField[];
   interval: number;
-  unit: string;
+  unit: TimeUnit[];
 }
 
 export interface ConfigList {
@@ -352,10 +358,11 @@ export interface TreemapParentsProps {
 
 export interface DataConfigPanelFieldProps {
   list: ConfigListEntry[];
+  dimensionSpan: DimensionSpan;
   sectionName: string;
   visType: VIS_CHART_TYPES;
   addButtonText: string;
   handleServiceAdd: (name: string) => void;
   handleServiceRemove: (index: number, name: string) => void;
-  handleServiceEdit: (isClose: boolean, arrIndex: number, sectionName: string) => void;
+  handleServiceEdit: (arrIndex: number, sectionName: string, isTimeStamp: boolean) => void;
 }
diff --git a/...rer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/...rer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -13,20 +13,25 @@ import {
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
-import { isArray } from 'lodash';
-import {
-  ConfigListEntry,
-  DataConfigPanelFieldProps,
-} from '../../../../../../../../common/types/explorer';
-import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { isArray, isEmpty } from 'lodash';
 import {
   AGGREGATIONS,
+  AGGREGATION_INFO,
+  BREAKDOWNS,
   CUSTOM_LABEL,
+  DIMENSION_INFO,
   GROUPBY,
+  SPAN,
 } from '../../../../../../../../common/constants/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import {
+  ConfigListEntry,
+  DataConfigPanelFieldProps,
+} from '../../../../../../../../common/types/explorer';
 
 export const DataConfigPanelFields = ({
   list,
+  dimensionSpan,
   sectionName,
   visType,
   addButtonText,
@@ -39,22 +44,23 @@ export const DataConfigPanelFields = ({
     if (!list || !isArray(list) || visType !== VIS_CHART_TYPES.HeatMap) return false;
     return name === AGGREGATIONS ? list.length >= 1 : list.length >= 2;
   };
+  const { time_field, unit, interval } = dimensionSpan;
 
   const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
-  const crossIcon = (index: number) => (
+  const crossIcon = (index: number, configName: string) => (
     <EuiButtonIcon
       color="subdued"
       iconType="cross"
       aria-label="clear-field"
       iconSize="s"
-      onClick={() => handleServiceRemove(index, sectionName)}
+      onClick={() => handleServiceRemove(index, configName)}
     />
   );
 
-  const aggregationToolTip = (iconToDisplay: JSX.Element) => (
+  const infoToolTip = (iconToDisplay: JSX.Element, content: string) => (
     <EuiToolTip
       position="right"
-      content="At least one metric is required to render a chart"
+      content={content}
       delay="regular"
       anchorClassName="eui-textTruncate"
     >
@@ -68,9 +74,26 @@ export const DataConfigPanelFields = ({
         <EuiTitle size="xxs" className="panel_title">
           <h3>{sectionName}</h3>
         </EuiTitle>
-        {isAggregation && aggregationToolTip(tooltipIcon)}
+
+        {sectionName !== BREAKDOWNS &&
+          infoToolTip(tooltipIcon, isAggregation ? AGGREGATION_INFO : DIMENSION_INFO)}
       </div>
       <EuiSpacer size="s" />
+      {sectionName === GROUPBY && dimensionSpan && !isEmpty(time_field) && (
+        <EuiPanel paddingSize="s" className="panelItem_button">
+          <EuiText size="s" className="field_text">
+            <EuiLink
+              role="button"
+              tabIndex={0}
+              onClick={() => handleServiceEdit(list.length, GROUPBY, true)}
+            >
+              {`${SPAN}(${time_field[0]?.name}, ${interval} ${unit[0]?.value})`}
+            </EuiLink>
+          </EuiText>
+          {crossIcon(-1, SPAN)}
+        </EuiPanel>
+      )}
+      <EuiSpacer size="s" />
       {isArray(list) &&
         list.map((obj: ConfigListEntry, index: number) => (
           <Fragment key={index}>
@@ -79,12 +102,14 @@ export const DataConfigPanelFields = ({
                 <EuiLink
                   role="button"
                   tabIndex={0}
-                  onClick={() => handleServiceEdit(false, index, sectionName)}
+                  onClick={() => handleServiceEdit(index, sectionName, false)}
                 >
                   {obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`}
                 </EuiLink>
               </EuiText>
-              {isAggregation ? aggregationToolTip(crossIcon(index)) : crossIcon(index)}
+              {isAggregation
+                ? infoToolTip(crossIcon(index, sectionName), AGGREGATION_INFO)
+                : crossIcon(index, sectionName)}
             </EuiPanel>
             <EuiSpacer size="s" />
           </Fragment>