Backtick supports, issues fixes

dashboards-observability/common/query_manager/ast/expression/group_by.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { isEmpty } from 'lodash';
 import { PPLNode } from '../node';
 import { Field } from './field';
 
@@ -24,8 +25,11 @@ export class GroupBy extends PPLNode {
   }
 
   toString(): string {
-    return `by ${this.span ? `${this.span.toString()}${this.fields.length > 0 ? ', ' : ''}` : ''}${this.fields
-      .map((field) => field.toString())
-      .join(', ')}`;
+    return (
+      `${!isEmpty(this.fields) || !isEmpty(this.span) ? 'by ' : ''}` +
+      `${
+        !isEmpty(this.span) ? `${this.span.toString()}${this.fields.length > 0 ? ', ' : ''}` : ''
+      }${this.fields.map((field) => field.toString()).join(', ')}`
+    );
   }
 }

dashboards-observability/common/query_manager/utils/index.ts

@@ -5,6 +5,7 @@
 
 import { CUSTOM_LABEL } from '../../../common/constants/explorer';
 import { AggregationConfigurations, PreviouslyParsedStaleStats } from '../ast/types';
+import { removeBacktick } from '../../../common/utils';
 
 export const composeAggregations = (
   aggConfig: AggregationConfigurations,
@@ -23,7 +24,7 @@ export const composeAggregations = (
       group_fields: [
         ...(aggConfig.dimensions || []),
         ...(aggConfig.breakdowns || []),
-      ].map((dimension) => ({ name: dimension.name })),
+      ].map((dimension) => ({ name: `\`${removeBacktick(dimension.name)}\`` })),
       ...(aggConfig.span &&
         JSON.stringify(aggConfig?.span) !== '{}' && { span: composeSpan(aggConfig.span) }),
     },

dashboards-observability/common/utils/index.ts

@@ -3,5 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { getIndexPatternFromRawQuery, preprocessQuery, buildQuery, composeFinalQuery } from './query_utils';
+export {
+  getIndexPatternFromRawQuery,
+  preprocessQuery,
+  buildQuery,
+  composeFinalQuery,
+  removeBacktick,
+} from './query_utils';
 export { uiSettingsService } from './settings_service';

dashboards-observability/common/utils/query_utils.ts

@@ -127,3 +127,8 @@ export const composeFinalQuery = (
     filteredPattern
   });
 };
+
+export const removeBacktick = (stringContainsBacktick: string) => {
+  if (!stringContainsBacktick) return '';
+  return stringContainsBacktick.replace(/`/g, '');
+};

dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap

@@ -1417,10 +1417,10 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "orientation": "v",
                 "type": "bar",
                 "x": Array [
-                  ",BeatsWest",
-                  ",Logstash Airways",
-                  ",OpenSearch Dashboards Airlines",
-                  ",OpenSearch-Air",
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
                 ],
                 "y": Array [
                   undefined,
@@ -1500,10 +1500,10 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   "orientation": "v",
                   "type": "bar",
                   "x": Array [
-                    ",BeatsWest",
-                    ",Logstash Airways",
-                    ",OpenSearch Dashboards Airlines",
-                    ",OpenSearch-Air",
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
                   ],
                   "y": Array [
                     undefined,
@@ -3193,83 +3193,201 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           }
         }
       >
-        <EmptyPlaceholder
-          icon="visLine"
+        <Plt
+          config={
+            Object {
+              "barmode": "line",
+              "displaylogo": false,
+              "responsive": true,
+              "xaxis": Object {
+                "automargin": true,
+              },
+              "yaxis": Object {
+                "automargin": true,
+              },
+            }
+          }
+          data={
+            Array [
+              Object {
+                "fill": "tozeroy",
+                "fillcolor": "rgba(60,161,199,0.35)",
+                "hoverinfo": "all",
+                "line": Object {
+                  "color": "#3CA1C7",
+                  "shape": "spline",
+                  "width": 2,
+                },
+                "marker": Object {
+                  "color": "rgba(60,161,199,0.35)",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "width": 2,
+                  },
+                  "size": 5,
+                },
+                "mode": "lines",
+                "name": "avg(machine.ram)",
+                "type": "line",
+                "x": Array [
+                  "",
+                  "",
+                  "",
+                  "",
+                ],
+                "y": Array [
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                ],
+              },
+              Object {
+                "mode": "text",
+                "showlegend": false,
+                "text": Array [],
+                "x": Array [],
+                "y": Array [],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "autosize": true,
+              "legend": Object {
+                "orientation": "v",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "shapes": Array [],
+              "showlegend": true,
+              "title": "",
+              "xaxis": Object {
+                "automargin": true,
+                "tickangle": 0,
+                "tickfont": Object {},
+              },
+              "yaxis": Object {
+                "automargin": true,
+                "tickfont": Object {},
+              },
+            }
+          }
         >
-          <EuiText
-            className="lnsChart__empty"
-            color="subdued"
-            data-test-subj="vizWorkspace__noData"
-            size="xs"
-            textAlign="center"
+          <PlotlyComponent
+            config={
+              Object {
+                "barmode": "line",
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+                "xaxis": Object {
+                  "automargin": true,
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                },
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "fill": "tozeroy",
+                  "fillcolor": "rgba(60,161,199,0.35)",
+                  "hoverinfo": "all",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "shape": "spline",
+                    "width": 2,
+                  },
+                  "marker": Object {
+                    "color": "rgba(60,161,199,0.35)",
+                    "line": Object {
+                      "color": "#3CA1C7",
+                      "width": 2,
+                    },
+                    "size": 5,
+                  },
+                  "mode": "lines",
+                  "name": "avg(machine.ram)",
+                  "type": "line",
+                  "x": Array [
+                    "",
+                    "",
+                    "",
+                    "",
+                  ],
+                  "y": Array [
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                  ],
+                },
+                Object {
+                  "mode": "text",
+                  "showlegend": false,
+                  "text": Array [],
+                  "x": Array [],
+                  "y": Array [],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "stack",
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "shapes": Array [],
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "tickangle": 0,
+                  "tickfont": Object {},
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                  "tickfont": Object {},
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
           >
             <div
-              className="euiText euiText--extraSmall lnsChart__empty"
-              data-test-subj="vizWorkspace__noData"
-            >
-              <EuiTextAlign
-                textAlign="center"
-              >
-                <div
-                  className="euiTextAlign euiTextAlign--center"
-                >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
-                  >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      <EuiIcon
-                        color="subdued"
-                        size="xxl"
-                        type="visLine"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <EuiSpacer
-                        size="l"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--l"
-                        />
-                      </EuiSpacer>
-                      <p>
-                        <FormattedMessage
-                          defaultMessage="No results found"
-                          id="visualization_noData"
-                          values={Object {}}
-                        >
-                          <span>
-                            No results found
-                          </span>
-                        </FormattedMessage>
-                      </p>
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiTextAlign>
-            </div>
-          </EuiText>
-        </EmptyPlaceholder>
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
       </Line>
     </VisualizationChart>
   </Visualization>
@@ -4699,10 +4817,10 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   undefined,
                 ],
                 "y": Array [
-                  ",",
-                  ",",
-                  ",",
-                  ",",
+                  "",
+                  "",
+                  "",
+                  "",
                 ],
               },
             ]
@@ -4782,10 +4900,10 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                     undefined,
                   ],
                   "y": Array [
-                    ",",
-                    ",",
-                    ",",
-                    ",",
+                    "",
+                    "",
+                    "",
+                    "",
                   ],
                 },
               ]